Question

我试图在我的表单上对齐这个单选按钮，但由于某种原因，它们有点大，而且文本在上面。

这是我的html页面：

    <div id="sabores">
                               <form action="" method="post">
                            <input type="radio" name="txt_sabor"  value="natural" class="radiobtn" /> Natural </br>
                            <input type="radio" name="txt_sabor"  value="laranja_com_acerola" class="radiobtn" /> Laranja com Acerola </br>
                            <input type="radio" name="txt_sabor"  value="morango" class="radiobtn" /> Morango </br>
                            <input type="radio" name="txt_sabor"  value="limao" class="radiobtn" /> Limão </br>
                            <input type="radio" name="txt_sabor"  value="acai_com_guarana" class="radiobtn" /> Açaí com Guaraná</br>
                            <input type="radio" name="txt_sabor"  value="uva" class="radiobtn" /> Uva </br>
                            <input type="radio" name="txt_sabor"  value="abacaxi" class="radiobtn" /> Abacaxi </br> 
    </form>

</div>

这是我的CSS：

#sabores{
    width: 370px;
    height: 215px;
    border: 1px solid #ccc;
    float: left;
    margin-top: 10px;
    background: #fff;   
    color: #667;
    font-size: 12px;
}

#sabores h2{
    width: 364px;
    color: #333;s
}

#sabores .radiobtn{
  width: 15px;
  height: 20px;
  margin-left: 10px;
  padding: 0 5px 0 5px;
  display: block;
  clear: left;
  float: left;
  vertical-align:bottom;
   margin-top: 10px;
}

What I have

Answer 1

您输错了br，而不是<br />。要纠正您的问题并同时添加一个良好的辅助功能练习，您可以使用label中的文本包装单选按钮。您也可以使用段落<p>代替<br />。如果您的元素浮动，请移除clear: left; float:left您不需要精确display:block。

#sabores .radiobtn{
    width: 15px;
    height: 20px;
    margin-left: 10px;
    padding: 0 5px 0 5px;
    vertical-align:bottom;
    margin-top: 10px;
}

<div id="sabores">
    <form action="" method="post">
        <label for="txt_sabor_natural"><!-- for with id value of input inside it-->
            <input type="radio" name="txt_sabor" id="txt_sabor_natural" value="natural" class="radiobtn" /> Natural </label><br />
        <label for="laranja">
            <input type="radio" name="txt_sabor" id="laranja" value="laranja_com_acerola" class="radiobtn" /> Laranja com Acerola</label><br />
        <label for="morango">
            <input type="radio" name="txt_sabor" id="morango" value="morango" class="radiobtn" /> Morango </label><br />
        <label for="limao">
            <input type="radio" name="txt_sabor" id="limao" value="limao" class="radiobtn" /> Limão </label><br />
        <label for="acai_com_guarana">
            <input type="radio" name="txt_sabor" id="acai_com_guarana" value="acai_com_guarana" class="radiobtn" /> Açaí com Guaraná </label><br />
        <label for="uva">
            <input type="radio" name="txt_sabor" id="uva" value="uva" class="radiobtn" /> Uva </label><br />
        <label for="abacaxi">
            <input type="radio" name="txt_sabor" id="abacaxi" value="abacaxi" class="radiobtn" /> Abacaxi </label><br /> 
    </form>
</div>

更好的解决方案是为每个情侣标签+输入或段落使用带有ul的无序列表li，并从sabores div中删除固定的高度：

<div id="sabores">
    <form action="" method="post">
        <p>
            <label for="txt_sabor_natural"><!-- for with id value of input inside it-->
                <input type="radio" name="txt_sabor" id="txt_sabor_natural" value="natural" class="radiobtn" /> Natural </label></p>
        <p>
            <label for="laranja">
                <input type="radio" name="txt_sabor" id="laranja" value="laranja_com_acerola" class="radiobtn" /> Laranja com Acerola</label></p>
        <p>
            <label for="morango">
                <input type="radio" name="txt_sabor" id="morango" value="morango" class="radiobtn" /> Morango </label></p>
        <p>
            <label for="limao">
                <input type="radio" name="txt_sabor" id="limao" value="limao" class="radiobtn" /> Limão </label></p>
        <p>
            <label for="acai_com_guarana">
                <input type="radio" name="txt_sabor" id="acai_com_guarana" value="acai_com_guarana" class="radiobtn" /> Açaí com Guaraná </label></p>
        <p>
            <label for="uva">
                <input type="radio" name="txt_sabor" id="uva" value="uva" class="radiobtn" /> Uva </label></p>
        <p>
            <label for="abacaxi">
                <input type="radio" name="txt_sabor" id="abacaxi" value="abacaxi" class="radiobtn" /> Abacaxi </label></p> 
    </form>
</div>

风格：

/*previous style*/

#sabores{
    width: 370px;
    /*height: 215px; don't need*/ 
    border: 1px solid #ccc;
    float: left;
    margin-top: 10px;
    background: #fff;   
    color: #667;
    font-size: 12px;
}

#sabores .radiobtn{
    width: 15px;
    height: 20px;
    margin-left: 10px;
    padding: 0 5px 0 5px;
    vertical-align:bottom;
}

#sabores p {
    margin-bottom: 10px;
    margin-top: 0;
}

Answer 2

对此课程进行以下更改：

#sabores .radiobtn{
  width: 15px;
  height: 20px;
  margin-left: 10px;
  padding: 0 5px 0 5px;
  margin-top: 10px;
  vertical-align:bottom;
  /*
  Remove following css properties
  display: block;
  clear: left;
  float: left;
 */
}

fiddle

Answer 3

请注意以下课程：

#sabores .radiobtn{
  width: 15px;
  height: 20px;
  margin-left: 10px;
  padding: 0 5px 0 5px;
  display: block;
  clear: left;
  float: left;
  vertical-align:bottom;
   margin-top: 10px;
}

如您所见，您使用以下属性：display:block; clear: left; float: left; 它使你的input元素不在页面流中，所以你可以删除这些属性，一切都会好的！

我建议您阅读有关视觉格式化模型的内容。（click here）

html表单中某些单选按钮的问题

3 个答案: