0

我刚刚开始使用网络，我的首要任务之一是修复一些跨浏览器 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 自动换行，这使得单选按钮和文本不在同一行。我想知道为什么会这样。我玩了一会儿，发现我可以为每个硬编码一些最小宽度，但这对我来说似乎不是一个“最佳”的解决方案。有什么想法吗？提前致谢！

4

3 回答 3

1

使用 CSS white-space属性：

label {
    white-space: nowrap;
}
于 2013-03-28T04:42:15.700 回答
0

can you put your style details? wrapping is not automatic other than if you had some other element or style rule that forces it to wrap

于 2013-03-28T05:33:52.083 回答
-1

尝试将代码更改为：

<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输入的标签。

于 2013-03-28T04:41:44.370 回答