襯裏和造型表單元素

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;} 

wh en使用包裝div就是你發現自己說「一個」元素塊「，就像你做的那樣:-)