Question

我刚开始使用网络，我的首要任务之一就是修复一些跨浏览器的UI问题。在Firefox和Internet Explorer中，这段代码看起来很好：

<div id="readTypeBtns" style="text-align: left;margin-left: -30px">
    <label class="radio inline">
    <input value="First Read" id="firstread" type="radio">First Read</label>
    <label class="radio inline">
    <input value="Second Read" id="secondread" type="radio">Second End</label>
</div>

当我在Chrome中查看此内容时，文本First Read和Second Read自动换行使单选按钮和文本不在同一行。我想知道为什么会这样。我玩了一下，我看到我可以硬编码每个的最小宽度，但这对我来说似乎不是一个“最好”的解决方案。有什么想法吗？提前谢谢！

Answer 1

使用CSS white-space属性：

label {
    white-space: nowrap;
}

Answer 2

你能把你的风格细节？包装不是自动的，除非你有一些强制它换行的其他元素或样式规则

Answer 3

尝试将代码更改为：

<div id="readTypeBtns" style="text-align: left;margin-left: -30px">
    <label class="radio inline" for="firstread">First Read</label>
    <input value="First Read" id="firstread" type="radio">
    <label class="radio inline" for="secondread">Second End</label>
    <input value="Second Read" id="secondread" type="radio">
</div>

基本上，<label></label>不应包含输入，但应包含for=""属性，该属性包含作为标签的输入的id。

防止文字自动换行，最小宽度？

3 个答案: