尝试将单选输入（+标签）添加到示例表单答案

【问题标题】：Trying to Add Radio Inputs (+Labels) To An Example Form尝试将单选输入（+标签）添加到示例表单
【发布时间】：2010-09-18 23:20:40
【问题描述】：

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

我收到了这个示例表单，但是我无法添加单选按钮，否则它们会被弄乱。

【问题讨论】：

标签： html css xhtml

【解决方案1】：

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

#basic input.radio
{
    width:20px;

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

在您的 html 中：

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

<!-- 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 --->

编辑：为标签的样式添加行高:)

【讨论】：

【解决方案2】：

您已经将表单输入全部设置为相同宽度 (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>

【讨论】：

【解决方案3】：

根据规范，允许将表单输入元素放在引用它们的标签内，例如，

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

看看这是否让造型变得更容易。（应该。）

【讨论】：

【解决方案4】：

您将它们命名为与文本输入相同的名称 - 将 name="textfield" 更改为 name="my_radio"

您也没有输入电子邮件地址，因此您的标签与输入不同步

【讨论】：

我指的问题是元素的布局。

【解决方案5】：

您的样式#basic input 为表单中的所有输入字段（包括您的单选按钮）提供了 200 像素的宽度，创建一个新样式，如 #basic input.radio，并为单选按钮提供单独的宽度，如 20 像素（确保您将它放在#basic 输入样式之后），然后您还必须为与单选按钮链接的标签指定较小的宽度，为它们添加一个类并将它们的宽度减小到 40px 左右。

那么单选按钮和它们相关的标签应该彼此对齐。

【讨论】：

感谢您的建议，能否提供示例源代码？

【解决方案6】：

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

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

这将修复单选按钮的巨大宽度 - 它们的宽度来自

#basic input { width:200px;}

正在使所有输入宽度为 200 像素。

总的来说，您对 ID 和类的应用并没有真正促进重用，但这是另一个问题。

【讨论】：