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 回答