如何将单选按钮对齐到文本左侧？

Question

对于我的raid按钮，我想要它们与我文本的右侧对齐，就像上面的其他元素一样，但我不能弄清楚如何做到这一点。 这是我为按钮准备的fiddle和代码。

<label>What kind of Ice Cream you like?</label>
<label><input type="radio" name="icecream" value="choco" id="radio">                     Chocolate</label><br>
<label><input type="radio" name="icecream" value="vanil" id="radio">Vanilla</label><br>
<label><input type="radio" style="vertical-align: middle" name="icecream" value="rocky" id="radio">Rocky Road</label><br>

我尝试了很多方法，但我的单选按钮要么会出现在文本下面，要么会像这样顺序混乱。

https://jsfiddle.net/russiandobby/gfj1nper/4/

- Garmagon117

---

第一行：左对齐 第二行：左对齐 第三行：左对齐 - Garmagon117

Answer 1

尝试为每个单选按钮使用一个id，就像这样：

<div>
    <label for="chocolate">Chocolate</label>
    <input type="radio" name="icecream" value="choco" id="chocolate"> 
</div>

最初的回答

*编辑

- Fernando Liévano

Answer 2

<input type="radio" name="icecream" value="choco" id="chocolate">
    <label for="chocolate">Chocolate</label>
    <input type="radio" name="icecream" value="choco" id="vanila">
    <label for="vanila">Vanila</label>

名称属性应该具有相同的值，而不是具有相同值的id。最初的回答。

- Emeka Okafor

Answer 3

我是一个有用的助手，可以为您翻译文本。

我曾经遇到同样的问题，在检查后发现以下解决方法，我将其应用于你的冰激凌变量：

首先，在HTML窗口中应用以下内容：

<div class="rowTab">
  <div class="labels">
<label for="ice cream Type"> What kind of Ice Cream you like?</label>
  <div/>
   <div class="rightTab">
    <ul style="list-style: none;">
         <li class="radio">
       <label>Chocolate<input name="radio-buttons"
value="1" type="radio" class="ice cream Type"></label></li>
         <li class="radio">
       <label>Vanilla<input name="radio-buttons" 
value="2" type="radio" class="ice cream Type"></label></li>
         <li class="radio">
       <label>Rocky Road<input name="radio-buttons"
value="3" type="radio" class="ice cream Type"></label></li>

然后，在CSS窗口中应用以下内容：

.ice cream type,
input[type="checkbox"] {
  float: right;
  margin-right:??px;
  }

在这种情况下，您从HTML窗口为每种口味定义了“冰淇淋类型”类，然后在CSS窗口中使用“float: right;”进行样式设置，这应该将单选按钮放置在每种口味名称的右侧。

- Gjohn

Answer 4

尝试这些解决方案。

  
    body{
  background-color:#42f4e2;
}
#title{
  text-align:center;
  font-family: 'Lobster', cursive;
  font-size: 50px;
}
#mainform{
   background-color:#e8ecf2;
    margin-top: 20px;
    margin-right: 20px;
    margin-bottom: 20px;
    margin-left: 20px;
    border-radius: 10px;
  
  
}

label{
  display: inline-block;
  width: 140px;
  text-align: right;
  margin-right: 40px;
  margin-top: 20px;
   
}

#survey-form{
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 95%;
  text-align:center;
}
select{
  display: inline-block;
  height:30px;
  text-align: right;
  margin-right: 40px;
  margin-top: 20px;
}

.redio-wrap label{
  display: inline-block;
  margin-right: 10px;
  width: auto;
}

.redio-wrap label:first-child{
  width: 140px;
  margin-right: 40px;
}

 <h1 id="title">Survey Form</h1>
    <div id="mainform">
      <form action="/action_page.php" method="get" id="survey-form">
        <label>*First name:</label> <input type="text" name="fname" placeholder="Enter your name"><br>
        <label>*Email:</label> <input type="text" name="email" placeholder="Enter your Email"><br>
        <label>*Age:</label> <input type="text" name="age" placeholder="Enter your Age"><br>
        <!--For the Drop Down menu-->
        <label>Describe your mood:</label>
        <select>
                        <option value="" disabled selected>Select your option</option>
                        <option value="happy">Happy</option>
                        <option value="sad">Sad</option>
                        <option value="angry">Angry</option>
                        <option value="neutral">Neutral</option>
        </select><br>
        <!--For the Drop Down menu end-->
        <!--Radio buttons start-->

        <div class="redio-wrap">

        <label>What kind of Ice Cream you like?</label>
        <label><input type="radio" name="icecream" value="choco" id="radio"> Chocolate</label>
        <label><input type="radio" name="icecream" value="vanil" id="radio">Vanilla</label>
        <label><input type="radio" style="vertical-align: middle" name="icecream" value="rocky" id="radio">Rocky Road</label>

      </div>

      </form>



    </div>

- Chandresh Polra

---

你需要使用类名为 .redio-wrap 的包装器，并将 #survey-form 这个类的宽度增加至 95%。 - Chandresh Polra

Answer 5

你需要进一步调整样式以将所有内容完全对齐，但是要想让单选框输入框显示在文本右侧，只需将 <input> 元素放在 <label> 元素之后即可。

目前，你的 <label> 包裹着输入框。请将其完全放在 <input> 元素之前。

此外：为了提高可用性和可访问性，点击标签应触发单选框输入框。为此，请在每个标签上设置一个与每个输入框的唯一 id="" 属性相匹配的 for="" 属性。

<label for="choco">Chocolate</label><input type="radio" name="icecream" value="choco" id="choco">
<label for="vanil">Vanilla</label><input type="radio" name="icecream" value="vanil" id="vanil">
<label for="rocky">Rocky Road</label><input type="radio" style="vertical-align: middle" name="icecream" value="rocky" id="rocky">

- Alejalapeno