我无法正确排列元素。我想要的是将我的表单元素与我排列上述元素的方式相同。顶部的“列表”是定义列表(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/>
标签)
答案 0 :(得分:1)
将标签+输入组合分别包裹起来,所以它看起来像这样:
<div>
<label for="Hospitals">Arbeidssted:</label>
<select id="Hospitals" name="Hospitals">
</select>
<div>
然后清除表单中的每个div:
form.theFormClass div{clear:both;}
何时使用包装div的线索是你发现自己在说“元素块”的地方,就像你做的那样: - )