试图向示例表单添加无线电输入（+标签）

Question

<style type="text/css"> 
body { 
    font-family:Helvetica, sans-serif; 
    font-size:12px; 
} 
p, 
h1, 
form, 
button { 
    border: 0; 
    margin: 0; 
    padding: 0; 
} 
.spacer { 
    clear: both; 
    height: 1px; 
} 
/* ----------- My Form ----------- */ 
.myform { 
    margin: 0 auto; 
    width: 400px; 
    padding: 14px; 
} 
    /* ----------- basic ----------- */ 
    #basic { 
     border: solid 2px #DEDEDE; 
    } 
    #basic h1 { 
     font-size: 14px; 
     font-weight: bold; 
     margin-bottom: 8px; 
    } 
    #basic p { 
     font-size: 11px; 
     color: #666666; 
     margin-bottom: 20px; 
     border-bottom: solid 1px #dedede; 
     padding-bottom: 10px; 
    } 
    #basic label { 
     display: block; 
     font-weight: bold; 
     text-align: right; 
     width: 140px; 
     float: left; 
    } 
    #basic .small{ 
     color:#666666; 
     display:block; 
     font-size:11px; 
     font-weight:normal; 
     text-align:right; 
     width:140px; 
    } 
    #basic input{ 
     float:left; 
     width:200px; 
     margin:2px 0 30px 10px; 
    } 
    #basic button{ 
     clear:both; 
     margin-left:150px; 
     background:#888888; 
     color:#FFFFFF; 
     border:solid 1px #666666; 
     font-size:11px; 
     font-weight:bold; 
     padding:4px 6px; 
    } 
</style> 

<div id="basic" class="myform"> 
    <form id="form1" name="form1" method="post" action=""> 
    <h1>Sign-up form</h1> 
    <p>This is the basic look of my form without table</p> 
    <label>Name 
     <span class="small">Add your name</span> 
    </label> 
    <input type="text" name="textfield" id="textfield" /> 

    <label>Email 
    <span class="small">Add a valid address</span> 
    </label> 
    <input type="text" name="textfield" id="textfield" /> 

    <label>Email 
    <span class="small">Add a valid address</span> 
    </label> 
    <!-- Problem ---> 
    <input type="radio" name="something" id="r1" class="radio" value="1" /><label for="r1">One</label> 
    <input type="radio" name="something" id="r2" class="radio" value="2" /><label for="r2">Two</label> 
    <!-- Problem ---> 
    <button type="submit">Sign-up</button> 
    <div class="spacer"></div> 


    </form> 
</div> 

我被给出了这个示例表单，但是我不能添加单选按钮而没有将它们混淆。

Answer 1

标题（样式标签内） 添加这些新的样式规则：在你的HTML

#basic input.radio 
{ 
    width:20px; 

} 
#basic label.radiolabel 
{ 
    width:40px; 
    text-align:left; 
    line-height:24px; 
} 

：

为每个标签添加一个新类，如下所示：

<!-- Problem --->  
<input type="radio" name="textfield" id="r1" class="radio" value="1" /> 
<label for="r1" class="radiolabel">One</label>  
<input type="radio" name="textfield" id="r2" class="radio" value="2" /> 
<label for="r2" class="radiolabel">Two</label>  
<!-- Problem ---> 

编辑：添加行高度标签的造型:)

Answer 2

你有他们的名字命名相同的文本输入 - 改变name="textfield"到name="my_radio"

您还可以对电子邮件地址的输入，所以你的标签是不同步的输入

Answer 3

你的风格＃基本输入是在窗体宽度为200px的范围内输入所有输入字段，包括单选按钮，创建一个新的样式，如#basic input.radio，并为单选按钮指定一个单独的宽度，如20像素（请确保在＃基本输入样式），那么您还必须为与单选按钮链接的标签指定一个较小的宽度，向它们添加一个类并将其宽度减小到某个值像40px一样。

然后，单选按钮及其关联的标签应该相互排列。

Answer 4

它是允许的，根据该规范，把形式输入元素引用它们的标记物，例如内，

<label for="input">Label: <input type="radio" id="input" name="input" /></label> 

看看是否是造型这一切更容易。 （它应该）

Answer 5

您已将表单输入的所有样式设置为相同的宽度（200px）并向左浮动，这也适用于单选按钮。

像这样的东西应该让你在正确的方向

<style type="text/css"> 
body{ 
    font-family:Helvetica, sans-serif; 
    font-size:12px; 
} 
p, h1, form, button{border:0; margin:0; padding:0;} 
.spacer{clear:both; height:1px;} 
/* ----------- My Form ----------- */ 
.myform{ 
    margin:0 auto; 
    width:400px; 
    padding:14px; 
} 
    /* ----------- basic ----------- */ 
    #basic{ 
     border:solid 2px #DEDEDE; 
    } 
    #basic h1 { 
     font-size:14px; 
     font-weight:bold; 
     margin-bottom:8px; 
    } 
    #basic p{ 
     font-size:11px; 
     color:#666666; 
     margin-bottom:20px; 
     border-bottom:solid 1px #dedede; 
     padding-bottom:10px; 
    } 
    #basic label{ 
     font-weight:bold; 
     text-align:right; 
     width:140px; 
     float:left; 
    } 
    #basic .small{ 
     color:#666666; 
     display:block; 
     font-size:11px; 
     font-weight:normal; 
     text-align:right; 
     width:140px; 
    } 
    #basic input{ 
     float:left; 
     width:200px; 
     margin:2px 0 30px 10px; 
    } 
    #basic button{ 
     clear:both; 
     margin-left:150px; 
     background:#888888; 
     color:#FFFFFF; 
     border:solid 1px #666666; 
     font-size:11px; 
     font-weight:bold; 
     padding:4px 6px; 
    } 
    #basic input.radio{ 
     width:50px; 
     margin:2px 0 30px 10px; 
    } 
    #basic label.radio { 
    width:40px; 
    text-align:left; 
    } 
</style> 

<div id="basic" class="myform"> 
    <form id="form1" name="form1" method="post" action=""> 
    <h1>Sign-up form</h1> 
    <p>This is the basic look of my form without table</p> 
    <label>Name 
     <span class="small">Add your name</span> 
    </label> 
    <input type="text" name="textfield" id="textfield" /> 

    <label>Email 
    <span class="small">Add a valid address</span> 
    </label> 
    <input type="text" name="textfield" id="textfield" /> 

    <label>Email 
    <span class="small">Add a valid address</span> 
    </label> 
    <!-- Problem ---> 
    <input type="radio" name="r1" id="r1" class="radio" value="1" /><label class="radio" for="r1">One</label> 
    <input type="radio" name="r2" id="r2" class="radio" value="2" /><label class="radio" for="r2">Two</label> 
    <!-- Problem ---> 
    <button type="submit">Sign-up</button> 
    <div class="spacer"></div> 


    </form> 
</div> 

Answer 6

要解决布局问题，添加以下CSS：

#basic input.radio { width:20px; } 

这将解决单选按钮大规模宽度 - 他们得到他们的宽度从

#basic input { width:200px;} 

正在使所有输入200px宽。总体而言，您的ID和类的应用程序并没有真正促进重用，但这是另一个问题。