Question

因此，对于我的突击按钮，我希望它们像上面的其他元素一样在文本的右侧对齐，但是我不知道该怎么做。这是我为按钮准备的小提琴和代码。

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

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

Answer 1

试试这个：

结构：

input[type="radio"] {
  float: left;
}

和代码：

.radioBtnLeft input{
    text-align: left;
    display:inline;
}

或者试试这个：

.radioBtnLeft {
  display: block;
  text-align: left;
}

Answer 2

尝试为每个电台使用一个ID，如下所示：

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

*已编辑

Answer 3

您需要更多地弄乱样式，以使所有内容完全按您的需要对齐，但是要使无线电输入位于文本的右侧，只需将<input>元素放在<label>之后元素。

目前，您的<label>正在包装输入。将其完全放在<input>元素之前。

此外：为了提高可用性和可访问性，单击标签应触发您的广播输入。要启用此功能，请在每个标签上设置一个for=""属性，该属性与每个输入的唯一id=""属性相匹配。

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

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>

Answer 5

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

name属性应具有相同的值，而不是id具有相同的值

Answer 6

我遇到了同样的问题，经过审查，我发现以下解决问题的方法，将其应用于您的冰淇淋变量：

首先，在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;”来为其设置样式。应该将单选按钮放在每种口味名称的右侧。

如何在我的文字左侧对齐单选按钮？

6 个答案: