单选按钮不与css列布局中的标签对齐 [英] radio buttons don't align with labels in css column layout
问题描述
任何帮助都非常感谢。
经过验证的页面位于： http://myweb.stedwards.edu/michaelo/ddtab.htm
问题在于单选按钮（2/3 - 左列）
无线电在各自的标签上方显示一条线。这是
html和css片段：
< fieldset class =" radio">
< legend> ;信用卡< / legend>
< label>< input name = card1 type =" radio" />美国运通< / label>
< label>< input name = card1 type =" radio" /> Mastercard< / label>
< label>< input name = card1 type =" radio" /> Visa< / label>
< / fieldset>
#columnarForm fieldset {
float：left;
显示：块;
宽度：24em;
保证金：0 1em 1em 1em;
填充：0 1em 1em 1em;
}
#columnarForm传奇{
font-weight：bold;
}
#columnarForm fieldset.radio
{
宽度：18em;
保证金： - 1em 0 2em 0;
}
#columnarForm fieldset.radio输入
{
clear ：both;
float：left;
position：static;
}
#columnarForm fieldset.radio label
{
font-weight：normal;
}
Any help greatly appreciated.
The validated page is at: http://myweb.stedwards.edu/michaelo/ddtab.htm
The trouble is with the radio buttons (2/3-down the left column). The
radios are displaying a line above their respective labels. Here are the
html and css snippets:
<fieldset class="radio">
<legend>Credit card</legend>
<label><input name=card1 type="radio" />American Express</label>
<label><input name=card1 type="radio" />Mastercard</label>
<label><input name=card1 type="radio" />Visa</label>
</fieldset>
#columnarForm fieldset{
float: left;
display: block;
width: 24em;
margin: 0 1em 1em 1em;
padding: 0 1em 1em 1em;
}
#columnarForm legend{
font-weight: bold;
}
#columnarForm fieldset.radio
{
width: 18em;
margin: -1em 0 2em 0;
}
#columnarForm fieldset.radio input
{
clear: both;
float: left;
position: static;
}
#columnarForm fieldset.radio label
{
font-weight: normal;
}
推荐答案
Mike Otten写道：
Mike Otten wrote:
任何帮助都非常感谢。
经过验证的页面位于： http：/ /myweb.stedwards.edu/michaelo/ddtab.htm
麻烦在于单选按钮（左列2/3）。
无线电在各自的标签上方显示一条线。以下是
html和css片段：
[snip]
#columnarForm fieldset.radio输入
{
clear：both;
float：left;
位置：静态;
宽度：自动;
身高：自动; }
Any help greatly appreciated.
The validated page is at: http://myweb.stedwards.edu/michaelo/ddtab.htm
The trouble is with the radio buttons (2/3-down the left column). The
radios are displaying a line above their respective labels. Here are the
html and css snippets: [snip]
#columnarForm fieldset.radio input
{
clear: both;
float: left;
position: static; width: auto;
height: auto; }
[snip]
你需要取消你在
$中设置的特定宽度和高度更常规选择器的b $ b属性：
#columnarForm输入
[snip]
You needed to cancel out the specific width and height you''d set in the
properties for the more general selector:
#columnarForm input
嗯，这比它的效果要好得多我一直在尝试的事情。但是现在
标签和收音机都在彼此的上面刷了：
更新的版本： http://myweb.stedwards.edu/michaelo/ddtab1.htm
原始版本： http://myweb.stedwards.edu/michaelo/ddtab.htm
在相关的说明中，我对获得
复选框以移近标签的任何建议持开放态度（右列，中途向下）
并且靠近底部。
感谢您的帮助 -
Mike
" Harlan Messinger" < HM ******************* @ comcast.net>在消息中写道
news：42 ************* @ individual.net ...
Well, that had a lot more effect than the things I''ve been trying. But now
the labels and the radios are all smushed on top of eachother:
Newer version: http://myweb.stedwards.edu/michaelo/ddtab1.htm
Original version: http://myweb.stedwards.edu/michaelo/ddtab.htm
On a related note, I am wide open to any suggestions for getting the
checkboxes to move over closer to their labels (right column, halfway down
and near the bottom).
Thanks for your help-
Mike
"Harlan Messinger" <hm*******************@comcast.net> wrote in message
news:42*************@individual.net...
Mike Otten写道：
Mike Otten wrote:
非常感谢任何帮助。
经过验证的页面位于： http://myweb.stedwards.edu/michaelo/ddtab.htm
麻烦在于单选按钮（左列2/3）。
无线电在各自的标签上方显示一条线。以下是
html和css片段：
Any help greatly appreciated.
The validated page is at: http://myweb.stedwards.edu/michaelo/ddtab.htm
The trouble is with the radio buttons (2/3-down the left column). The
radios are displaying a line above their respective labels. Here are the
html and css snippets:
[snip]
[snip]
#columnarForm fieldset.radio input
{
clear：both;
float：left;
position：static;
#columnarForm fieldset.radio input
{
clear: both;
float: left;
position: static;
width：auto;
height：auto;
width: auto;
height: auto;
}
[snip]
您需要取消在更常规选择器的
属性中设置的特定宽度和高度：
#columnarForm输入
[snip]
You needed to cancel out the specific width and height you''d set in the
properties for the more general selector:
#columnarForm input
Mike Otten写道：
Mike Otten wrote:
任何帮助都非常感谢。
经过验证的页面位于： http：//myweb.stedwards .edu / michaelo / ddtab.htm
麻烦在于单选按钮（左列2/3）。
无线电在各自的标签上方显示一条线。以下是
html和css片段：
Any help greatly appreciated.
The validated page is at: http://myweb.stedwards.edu/michaelo/ddtab.htm
The trouble is with the radio buttons (2/3-down the left column). The
radios are displaying a line above their respective labels. Here are the
html and css snippets:
我在该页面上看不到任何内容，除了客户和产品标签以及
大空淡黄色区域。
为什么要设计一个新页面作为Transitional？您应该使用
HTML 4.01严格。
http://www.w3.org/QA/2002/04/valid-dtd-list.html
<！DOCTYPE html PUBLIC" - // W3C // DTD HTML 4.01 // EN"
" http：//www.w3.org/TR/html4/strict。 dtd">
为什么会这样？
< br>< br>< br>< br>< br> ;< br>< br>< br>< br>< br>< br>< br>< b>< br>< br>< br>
< br>< br>< br>< br>< br>< br>< br>< br>< br>< br>< br>< br>< b>< br>< br>< br>
< br>< br>< br>< br>< br>< br> ;< br>< br>< br>< br>< br>< br>< b>< br>< br>< br>
<峰; br><峰; br><峰; br><峰; br><峰; br><峰; br><峰; br><峰; br>& < br>< br>< br>< br>< b>< br>< br>< br>
-
-bts
-警告：我为草坪鹿刹车
I don''t see anything on that page except Customer and Product tabs and a
large empty pale yellow area.
Why are you designing a new page as Transitional? You should be using
HTML 4.01 Strict.
http://www.w3.org/QA/2002/04/valid-dtd-list.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
Why this?
<br><br><br><br><br><br><br><br><br><br><br><br><b r><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><b r><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><b r><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><b r><br><br><br>
--
-bts
-Warning: I brake for lawn deer
这篇关于单选按钮不与css列布局中的标签对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
