html - 单选按钮位置 HTML/CSS

Question

对于我的第一个网站，我必须创建一个简单的 HTML/CSS 表单。但我的问题是我的单选按钮不想听我命令他说什么。

(这是没有 float 的)

我希望它位于电子邮件输入下方，但我给 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