相关疑难解决方法(0)

可能重复:
display:inline和display:inline-block有什么区别？

在CSS中,display可以具有inline和的值inline-block.任何人都可以详细解释inline和之间的区别inline-block吗？

我到处搜索,最详细的解释告诉我inline-block被放置为inline,但表现得像block.但它没有解释究竟"表现为块"的含义.这有什么特别之处吗？

一个例子是更好的答案.谢谢.

看看这个例子

它有一个Flexbox容器,flex-flow: row wrap;用于包装所有项目.这几乎就是我想要的.

当它开始换行时,第6项包裹到第二行:

1 2 3 4 5
    6

但总是我想在开始包装时至少包装两件物品,这样你就不会有一件物品在一条线上:

1 2 3 4
  5 6

这是一些示例HTML和CSS来显示问题:

<p>thisssssssssssss&nbsp;issssssssss a test</p>
<p>thisssssssssssss&nbsp;<span>isssssssssss another</span> test</p>
<p>thisssssssssssss&nbsp;<button>isssssssssss another</button> test</p>

button { display: inline; }

通过调整输出区域的大小来试试这个JSFiddle.

结果(在Ubuntu的Chromium中):

如您所见,<button>在第三个示例中有一个换行符,我试图避免.该 角色好像被忽略了它(作为一个普通的空间处理).期望的结果是"this"和"is"之间没有中断,就像前两个例子一样.

我已经找到了为什么内联块在不间断的空间后会中断？.答案在那里建议使用<nobr>或white-space: nowrap.然而:

• 我正在设置,所以我甚<button>至不理解为什么问题存在,因为它是一个内联元素.display: inline

• 我需要一个纯CSS解决方案,在按钮之前的文本中没有任何额外的HTML.我的HTML必须看起来像这样:

  <p>{{SOME TEXT}}&nbsp;<button>foo</button></p>
  

  Run Code Online (Sandbox Code Playgroud)

  我不知道是否{{SOME TEXT}}会包含空格.我可以在文本周围添加额外的HTML ,但在上面的答案中链接的解决方案需要在文本本身中添加一个元素.

为什么即使在设置时问题也会发生display: inline;,如何在不修改文本本身的情况下解决问题呢？