양식 요소 라이닝 및 스타일링

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

나는 또한 라인의 "블록"레이블과 입력/선택 후 휴식을 원한다. 을 Heres 형태합니다 (<br/> 태그 죄송합니다)

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

것은, 각각의 추가에 라벨 + 입력 조합을 바꿈에 대한 코드 :

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

및 양식 내의 각 div를 지우십시오.

form.theFormClass div{clear:both;} 

단서 wrapping div를 사용하는 것은 여러분이 "요소의 블록"이라고 말한 것과 같습니다 :-)