Question

我的表单由2列表格式化。在左侧列中，我使用<label>，在右列中使用<input type="text">。某些输入框是必需的。因此要求是对于所有强制性输入，标签旁边应该有一个红色星号。但是，标签的设计使其始终跟着换行符，因此星号会自动进入下方。确保不会发生这种情况的最佳方法是什么，并且星号位于标签旁边的正确位置？我认为<div float="left>选项不适用于表格。这是所要求的代码;

<tr>
                <td class="leftCell"><span style="white-space: nowrap;"><label for="Subcontractor_CompanyName">Company</label><span style="display: inline;" class="errorHighlight">*</span></span></td>
                <td class="rightCell"><input style="width: 300px;" id="Subcontractor_CompanyName" name="Subcontractor.CompanyName" value="096 club" type="text" data-val-required="Must enter the Company Name" data-val="true">
                    <span class="field-validation-valid" data-valmsg-replace="false" data-valmsg-for="Subcontractor.CompanyName">*</span></td>
            </tr>

我尝试使用<span style="white-space: nowrap;">失败。

Answer 1

或者，如果他们将<label>作为块，您可以这样做：

label {display: inline;}

Answer 2

如果您能够更改标记，则可以将星号放在标签内。

类似的东西：

<label>Name:<sup>*</sup></label>
<input type="text" name="name" />

和CSS：

label sup { color: red; }

结果如下：http://jsfiddle.net/ByGVE/

Answer 3

如果默认的浏览器默认CSS和足够的宽度来保持旁边的输入，则标签不会触发新行。

你可能有一些在标签上设置display: block的CSS。在输入上设置它。

Answer 4

使用style =“white-space：pre-wrap;”

删除<label> </label>后的换行符

4 个答案: