衬里和造型元素

Question

我无法正确排列我的元素。我想要的是以与上面排列元素相同的方式排列我的表单元素。顶部“列表”是定义列表（dl）及其子项。我不想使用 dl 来对齐表单元素，因为它在语义上不正确，并且我们可能有人使用屏幕阅读器来使用该应用程序。我尝试过使用无序列表，但我不知道如何正确设置它们的样式以获得所需的结果。

（Tilgangstype 和 Fagområde 还包含选择列表，我只是隐藏了它们，忘记在屏幕截图中显示它们，格式相同虽然问题）

这是我一直用于顶部元素的代码：

.styled-form label, .def-list dl dt {
background:#5D6DA7;
color:#fff;    
float:left;    
font-weight:bold;    
margin-right:10px;    
padding:5px;    
width:130px;
}

.styled-form input, .styled-form select, .def-list dl dd {
margin:2px 0;    
padding:5px 0;
}

我还希望该行在标签和输入/选择的“块”之后中断。 这是表单的代码

            <!-- Pick hospital, roles and professions -->
        <label for="Hospitals">Arbeidssted:</label>
        <select id="Hospitals" name="Hospitals">
        </select><br/>
        <label for="HospitalRoles">Tilgangstype (rolle):</label>
        <select id="HospitalRoles" >
        </select><br/>
        <label for="HospitalProfessions">Fagområde:</label>
        <select id="HospitalProfessions" >
        </select><br/>
        <!-- Start-End date -->
        <label for="FromDate">Startdato:</label>
        <input type="text" class="date" name="FromDate" id="FromDate" /><br/>
        <label for="ToDate">Sluttdato:</label>
        <input type="text" class="date" name="ToDate" id="ToDate" /> (Fylles ut ved tidsbegrenset tilgang)<br/>

（抱歉
> 标签）

Answer 1

将标签+输入组合包装在一个额外的each中，所以它看起来像这样：

    <div>
    <label for="Hospitals">Arbeidssted:</label>
    <select id="Hospitals" name="Hospitals">
    </select>
    <div>

然后清除表单内的每个div：

    form.theFormClass div{clear:both;}

何时使用包装div的线索是您发现自己在说“元素的‘块’”，就像你所做的那样:-)