레이블의 행 스타일 지정 및 CSS로 목록 드롭 다운

Question

일련의 레이블/드롭 다운 목록을 스타일링하는 방법은 무엇입니까? 각 드롭 다운 목록에는 레이블 바로 위에 레이블이 있습니다.

현재 나는 그들이 모두 한 행에 줄을, 내 HTML을 기본적으로

<label for="select1">Label1</label> 
<select id="select1">...<select> 

<label for="select2">Label2</label> 
<select id="select1">...<select> 

<label for="select3">Label3</label> 
<select id="select3">...<select> 

에 있습니다. 나는이 스타일

label { 
display:block; 
} 

내가 그들 모두 더 나은 단어의 부족, 하나 개의 컬럼에 줄 지어 취득을 적용합니다.

그럼 어떻게 레이블을 만들거나 일련의 목록을 드롭 다운 할 수 있습니까?하지만 각 드롭 다운 목록의 레이블이 바로 위를 차지하도록하려면 어떻게해야합니까? 물론 테이블은 없습니다.

감사합니다.

Answer 1

업데이트 : 정제 크로스 브라우저 디스플레이

없음 당신이 사용하는, 가고있는 것을 최종 목표는,하지만 난 제대로 해석하면, 뭔가 같은 this updated fiddle가 보여 무슨 생각을 확신한다 (필요)와 함께 작동하도록 명시 적 width 설정 :

CSS

label, select { 
    display: inline-block; 
    width: 100px; 
} 

label { 
    position: relative; 
    top: -1.2em; 
    left: 5px; 
} 

select { 
    margin: 1.5em 0 0 -100px; 
} 

여러 행에 대한 업데이트

고정 폭의 래퍼 요소를 설정하여 행을 줄 바꿈하십시오 (like this fiddle).

Answer 2

이 페이지의 맨 위에있는 메뉴 (질문, 태그, 사용자 ...)를 확인하십시오. 순서없는 목록과 함께 표시됩니다.

<div class="nav mainnavs"> 
    <ul> 
     <li class="youarehere"><a id="nav-questions" href="/questions">Questions</a></li> 
     <li><a id="nav-tags" href="/tags">Tags</a></li> 
     <li><a id="nav-users" href="/users">Users</a></li> 
     <li><a id="nav-badges" href="/badges">Badges</a></li> 
     <li><a id="nav-unanswered" href="/unanswered">Unanswered</a></li> 
    </ul> 
</div> 

각 라벨/드롭 다운 쌍을 목록 항목에 붙일 수 있습니다.

<li> 
    <label for="select1">Label1</label> 
    <br /> 
    <select id="select1">...<select> 
</li> 

Answer 3

블록 요소 내에서 각 "목록/레이블"조합을 감쌀 수 있습니다. 그런 다음 같은 행에 여러 항목을 가지고 해당 요소를 떠 수 있습니다

<div class='lst'> 
    <label for="select1">Label1</label> 
    <select id="select1">...<select> 
</div> 

<div class='lst'> 
    <label for="select2">Label2</label> 
    <select id="select1">...<select> 
</div> 

<div class='lst'> 
    <label for="select3">Label3</label> 
    <select id="select3">...<select> 
</div>​ 

div.lst { 
float: left; 
margin: 0 5px 0 5px; 
} 

div.lst label { 
display: block; 
} 

예 바이올린 : http://jsfiddle.net/Z5hAm/ 당신은 아마 p 같은 다른 태그 그룹 label 및 select해야합니다

Answer 4

, div 또는 fieldset을 입력 한 다음 해당 요소를 display:inline-block 또는 float:left으로 만듭니다.

는

Answer 5

이러한 행이 여러 개 있기 때문에 테이블에 고정되어 있습니다. 모두 행을 정렬해야합니다.