Question

这是example。

正如您所看到的，我制作了<button>元素inline（事实上，如果它是inline或inline-block并不重要

问题是在某些容器宽度上，＆＃34;。＆＃34;单独进入下一行，这很奇怪。

没有按钮元素，＆＃34; here＆＃34;和＆＃34;。＆＃34;一起进入下一行，这是理想的行为。

我不想在＆＃34; here＆＃34;之前放置明确的换行符。它应该是响应。意思是，如果容器足够宽，一切都应该排成一行。

我也不想把＆＃34;。＆＃34;在按钮内，因为它不应该着色。

我该如何解决这个问题？

Answer 1

如果您将按钮和句点放在带有display: inline-block的新容器中，浏览器会更喜欢将它们保持在同一行。只要可能，包装将在新容器之前或之后进行。

Answer 2

您可以使用white-space: nowrap

将按钮和句点包装在容器中

<p >This section means lorem ipsum dolor sit amet. You can see the permissions <span style="white-space: nowrap;"><button>here</button>.</span></p>

（虽然我在实践中总是使用课堂而不是内联式）。

Answer 3

要使用的最正确的元素是<a>元素 - 因为您希望用户单击它然后转到该位置并查看结果。

由于<a>已经是内联元素 - 这不会影响您的布局。你可以设置a的样式以任何你想要的方式 - 但这不是一个按钮的工作。最好使用合适的工具来完成工作。

＆＃13;

p{
  font-size: 14px;
  font-family: arial;
}

a {
  color:red;
  text-decoration: none;
}

＆＃13;

<div>
<p>This section means lorem ipsum dolor sit amet. You can see the permissions <a href="target-location.html">here</a>.</p>
</div>

＆＃13;

Answer 4

使用伪类而不是“。”作为文本本身的一部分。这是有效的代码从您的示例中，删除“。”从HTML中添加按钮：在css之后

HTML：

<div style="width:508px">
<p >This section means lorem ipsum dolor sit amet. You can see the permissions <button>
here</button></p>
</div>

CSS：

p{
font-size: 14px;
font-family: arial;
}
button {  
border: 0;
padding: 0;
font-size: 14px;
height: auto;
display: inline;
color: red;
}
button::after{
content:'.';
color: black;
}

防止内联元素和句点之间的换行符

4 个答案: