Html 衬里和造型元素

我无法正确排列元素。我想要的是以与上面排列元素相同的方式排列我的表单元素。最上面的“列表”是定义列表（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/>

阿尔贝德斯特德：


Tilgan类型（rolle）：


法戈马尔德：


Startdato：


Slutdato：
（Fyles ut ved tidsbegrenset tilgang）

---

（很抱歉出现了

标签）

将标签和输入组合分别用一个额外的标签和输入组合包装起来，看起来如下所示：

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

---

何时使用换行div的线索是，您发现自己在说“元素的‘块’”，正如您所做的那样：-）

使代码看起来有点难看，但至少它可以工作！）谢谢

    form.theFormClass div{clear:both;}