CSS HTML如果句子的末尾被浏览器缩放强制分解，则使句子/ page-element从一个新行开始

Question

我有一个ASP.net应用程序，但我需要一些帮助html和css。 所以我得到了一些文字，然后是一些按钮和更多的文字，现在我希望所有这些按钮在一个元素掉出页面时跳转到下一行。

<p> Lorum ipsum ...
<asp:Button ID="Button1" allotherrequiredatts=""/>
<asp:Button ID="Button2" allotherrequiredatts=""/>
<asp:Button ID="Button3" allotherrequiredatts=""/>
more text </p>

我通过在代码中添加<br>标记来操纵最后的结果。

因此有一个很好的CSS或HTML技巧可以实现这一目标。

Answer 1

white-space nowrap应该这样做：

<p> Lorum ipsum ...
<span style="white-space: nowrap;">
<asp:Button ID="Button1" allotherrequiredatts=""/>
<asp:Button ID="Button2" allotherrequiredatts=""/>
<asp:Button ID="Button3" allotherrequiredatts=""/>
</span>
more text </p>

Answer 2

将按钮包裹在<span>中，并将范围的CSS设置为display: block;。

这将阻止跨度（您的按钮）的内容换行到新行。

Answer 3

将5个按钮放入面板元素中，如...

<asp:panel style="float:left;">
   <asp:Button ID="Button1" allotherrequiredatts=""/>
   <asp:Button ID="Button2" allotherrequiredatts=""/>
   <asp:Button ID="Button3" allotherrequiredatts=""/>
</asp:panel>

Answer 4

CSS

.button-group {
    display:inline-block;
    width:auto;
    text-align:center;
}

HTML

<span class="button-group">
 <button ID="Button1">1</button>
 <button ID="Button2">2</button>
 <button ID="Button3">3</button>
 <button ID="Button4">4</button>
 <button ID="Button5">5</button>
</span>

jsfiddle