单选按钮位置HTML / CSS

Question

对于我的第一个网站，我必须创建一个简单的HTML / CSS表单。但我的问题在于，我的收音机按钮不想听我订购的东西。

（这没有浮动）

我想把它放在电子邮件输入的下面，但是我给margin-left越多，那两个单选按钮就越分开（宽度）。

（这是下面的代码）

如何解决单选按钮位置问题？

正如您所看到的，我已尝试过last-child，但它没有显示任何效果。在我的页脚代码中没有自动高度或宽度。

我不允许使用JavaScript。只有纯HTML和CSS。

HTML

<form> 
<label class="field">Name:</label><input id="email" type="Name" placeholder="Name"><br>
<label class="field">Lastname:</label> <input id="lastname" type="lastname" placeholder="Lastname"><br>
<label class="field">Email:</label> <input id="Email" type="Email" placeholder="Email"><br>             
<label class="radio">No<input  type="radio" name="st" value="No"/></label><br>
<label class="radio">Yes<input  type="radio" name="st" value="Yes"  /></label><br>              
<label class="textarea"><textarea></textarea></label><br>
<label class="submit"><input type="submit" value="Submit"></label><br>
<label class="feedback">Feedback:</label>
</form>

CSS

  /*FORM*/
    form { 
        width: 100%;
        margin-top:5px;
    }

    label.field {
        text-align: right;
        width:100px;
        float:left;
        font-weight:bold;
        padding-top:4px;
    }

    label.radio{
    float:left;
    margin-top: 20px;
    margin-left: 15px;
    padding:0px 0px 5px 0px;
    border:1px solid black;
    white-space: nowrap;        
}


    label.radio:last-child{

        margin-right: 10px;

    }

    label.feedback{
        text-align:right;
        width:100px;
        float:left;
        font-weight:bold;
        padding-top:4px;
        margin-top: -40px;
    }

Answer 1

将它们包裹在列表中，并清除LI。摆脱休息。您应该先重置列表：ul, li {margin:0;padding:0list-style:none}

li { clear:both }

HTML：

<ul>
    <li>
       <label class="field">Name:</label>
       <input id="email" type="Name" placeholder="Name">
    </li>
    <li>
       <label class="field">Lastname:</label>
       <input id="lastname" type="lastname" placeholder="Lastname">
    </li>
    ....
 </ul>

列表是语义的，这对残疾人有利。您还可以通过调整边距/填充来使用列表格式化布局。

请参阅：A List Apart - Prettier Accessible Forms