衬里和造型形成元素

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

（抱歉<br/>标签）

Answer 1

将标签+输入组合分别包裹起来，所以它看起来像这样：

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

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

    form.theFormClass div{clear:both;}

何时使用包装div的线索是你发现自己在说“元素块”的地方，就像你做的那样： - ）