复选框列表与标签不对齐。 [英] List of checkboxes does not line up with label.
问题描述
我不确定我是否应该在这里使用表格来构建布局，或者如果CSS没问题，可以使用
。我有一个数据输入表单，我已将
标签浮动到一侧，并给它们一个特定的宽度。通过常规输入
（如文本框），一切都很好。我遇到的问题是
，我有一个无序的复选框列表，只有第一个项目
将与标签对齐。附加复选框及其标签
最终会直接在标签下方呈现。我如何保持清单
直排，并与标签的右边缘齐平，如
其他字段是什么？
我还应该注意到我尝试将列表包装在一个div中并将margin-left属性设置为b $ b与标签宽度相同的偏移量，但是它
没有排队，相反，它开始向标签'右边缘'
的右边开始了。
< div class =" ; field-set">
< label class =" field-label">联络角色：< / label>
< ul style =" ;列表样式：无;边距：0;保证金左：0; padding-left：0;">
< li style =" margin-left：0;">< input type =" checkbox" id =" AccountAdmin" />
< label for =" AccountAdmin"> Account Admin< / label>< / li>
< li style =" margin-left：0;">< input type =" checkbox" id =" Technical" />
< label for =" Technical"> Technical< / label>< / li>
< li style =" margin-left：0;">< input type ="复选框" ID = QUOT;销售" /> < label
for =" Sales"> Sales< / label>< / li>
< / ul>
< / div>
div.field-set {
margin-bottom：3px;
}
label.field-label {
float：left;
宽度：17em;
margin-right： .5em;
font-weight：bold;
font-size：.85em;
margin-top：.15em;
背景色：＃F8F8F8;
填充顶部：4px;
/ *填充：4px 0px 4px 4px; * /
}
谢谢，
史蒂夫
I''m not sure if I should be using tables here to structure the layout or
if CSS is okay. I have a data entry form in which I have floated the
labels to one side, and given them a specific width. With regular input
such as textboxes, everything lines up fine. The problem I''m having is
that I have an unordered list of checkboxes, and only the first item
will line up with the label. The additional checkboxes and their labels
end up being rendered directly below the label. How can I keep the list
lined up straight, and flush with the right edge of the label like the
other fields are?
I should also note that I tried wrapping the list in a div and setting
the margin-left property to the same offset as the label width, but it
did not line up, instead it started a good bit farther to the right of
the label''s right edge.
<div class="field-set">
<label class="field-label">Contact Roles:</label>
<ul style="list-style:none; margin-top:0; margin-left:0; padding-left:0;">
<li style="margin-left:0;"><input type="checkbox" id="AccountAdmin"/>
<label for="AccountAdmin">Account Admin</label></li>
<li style="margin-left:0;"><input type="checkbox" id="Technical"/>
<label for="Technical">Technical</label></li>
<li style="margin-left:0;"><input type="checkbox" id="Sales"/> <label
for="Sales">Sales</label></li>
</ul>
</div>
div.field-set {
margin-bottom:3px;
}
label.field-label {
float:left;
width:17em;
margin-right:.5em;
font-weight:bold;
font-size:.85em;
margin-top:.15em;
background-color:#F8F8F8;
padding-top:4px;
/*padding:4px 0px 4px 4px;*/
}
Thanks,
Steve
推荐答案
" Steve" <纳克***** @ digitalnothing.com>在消息中写道
news：P2SWc.13737
"Steve" <ng*****@digitalnothing.com> wrote in message
news:P2SWc.13737
ni.49@okepread01 ...
ni.49@okepread01...
我不确定是否我应该在这里使用表来构建布局，或者如果CSS没问题，那么
。我有一个数据输入表单，我已将
标签浮动到一侧，并给它们一个特定的宽度。通过常规输入
（如文本框），一切都很好。我遇到的问题是，我有一个无序的复选框列表，只有第一个项目
将与标签对齐。附加复选框及其标签最终会直接在标签下方呈现。我如何保持清单直线排列，并与标签的右边缘齐平，如
其他字段？
我还应该注意到我试图包装在div中列出并将margin-left属性设置为与标签宽度相同的偏移量，但它没有排成一行，而是在
右边开始了更远的位置标签的右边缘。
< div class =" field-set">
< label class =" field-label"> Contact Roles：< ; /标签>
这不适合使用LABEL标签。 使用LABEL元素
为没有隐式标签的控件指定标签。而不是DIV，为什么不使用为此目的而存在的FIELDSET标签呢？然后，
而不是LABEL，使用LEGEND标签。
< ul style =" list-style：none;边距：0;保证金左：0; padding-left：0;">
< li style =" margin-left：0;">< input type =" checkbox" id =" AccountAdmin" />
< label for =" AccountAdmin"> Account Admin< / label>< / li>
I''m not sure if I should be using tables here to structure the layout or
if CSS is okay. I have a data entry form in which I have floated the
labels to one side, and given them a specific width. With regular input
such as textboxes, everything lines up fine. The problem I''m having is
that I have an unordered list of checkboxes, and only the first item
will line up with the label. The additional checkboxes and their labels
end up being rendered directly below the label. How can I keep the list
lined up straight, and flush with the right edge of the label like the
other fields are?
I should also note that I tried wrapping the list in a div and setting
the margin-left property to the same offset as the label width, but it
did not line up, instead it started a good bit farther to the right of
the label''s right edge.
<div class="field-set">
<label class="field-label">Contact Roles:</label>
This isn''t an appropriate use of the LABEL tag. "The LABEL element is used
to specify labels for controls that do not have implicit labels." Instead of
the DIV, why not use the FIELDSET tag which exists for this purpose? Then,
instead of LABEL, use the LEGEND tag.
<ul style="list-style:none; margin-top:0; margin-left:0; padding-left:0;">
<li style="margin-left:0;"><input type="checkbox" id="AccountAdmin"/>
<label for="AccountAdmin">Account Admin</label></li>
您在新行上启动LABEL标记。新行字符被视为
空格。任何空白区域都是浏览器插入换行符b / b
的合法位置。如果你不想换行，请
... id =" AccountAdmin" />& nbsp;< label ...
全部在一条线上。 （而不是& nbsp;，你可以在标签上放一半左边的
填充。）
You start your LABEL tags on new lines. A new line character is treated as
white space. Any white space is a legitimate place for the browser to insert
a line break. If you don''t want a line break, have
... id="AccountAdmin"/> <label ...
all on one line. (Instead of the , you could put half an em of left
padding on the label.)
< div class =" field-set">
< label class =" field-label"> Contact Roles：< / label>
这不适合使用LABEL标签。 使用LABEL元素
为没有隐式标签的控件指定标签。而不是DIV，为什么不使用为此目的而存在的FIELDSET标签？然后，
而不是LABEL，使用LEGEND标签。
<div class="field-set">
<label class="field-label">Contact Roles:</label>
This isn''t an appropriate use of the LABEL tag. "The LABEL element is used
to specify labels for controls that do not have implicit labels." Instead of
the DIV, why not use the FIELDSET tag which exists for this purpose? Then,
instead of LABEL, use the LEGEND tag.
不，标签标签可能不合适（可能跨度会更好），
但这只是来自更多项目列表的剪辑，这些项目已经在
字段集中。 div上的类名称具有误导性。这意味着
更多的是标签/输入对象，以便在底部放置适当的边距
。
您在新行上启动LABEL标记。新行字符被视为空白字符。任何空白区域都是浏览器插入换行符的合法位置。如果你不想换行，请
... id =" AccountAdmin" />& nbsp;< label ...
一切都在一条线上。 （而不是& nbsp;，你可以在标签上放置半个左边的填充物。）
No, the label tag may not be appropriate(maybe a span would be better),
but this is just a snip from a greater list of items, which are in a
fieldset already. The class name on the div is misleading. It implies
more so a label/input pair of objects so that the proper margin can be
placed at the bottom.
You start your LABEL tags on new lines. A new line character is treated as
white space. Any white space is a legitimate place for the browser to insert
a line break. If you don''t want a line break, have
... id="AccountAdmin"/> <label ...
all on one line. (Instead of the , you could put half an em of left
padding on the label.)
问题是我*做*想要列表中的换行符。显示
应如下所示：
联系角色：O账户管理员
O技术
O销售
相反，我得到了这个：
联系角色：O账户管理员
O技术
O销售
希望这能解释我想要做的更清楚。
谢谢，
史蒂夫
The problem is that I *do* want line breaks in the list. The display
should look something like this:
Contact Roles: O Account Admin
O Technical
O Sales
Instead I am getting this:
Contact Roles: O Account Admin
O Technical
O Sales
Hopefully this explains what I''m looking to do a bit more clearly.
Thanks,
Steve
这篇关于复选框列表与标签不对齐。的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
