CSS의 tableless 양식

나는 레이블 정렬을 통해 스타일되는 경향이있다 형태가 많이 포함되어 관리자 사이트를 가지고 :CSS의 tableless 양식

: 난 보통 효과를 얻기 위해 무엇을

<form> 
    <label for="name"><input type="text" name="name"> 
    <label for="name"><input type="text" name="name"> 
    <label for="name"><input type="text" name="name"> 
</form>

내 여러 양식이, 때로는 매우 다른 있고, 내가 원하는 경우 결과에 필요한 최소 폭을 제공하기 위해 저를 강제로 더 이상 레이블 이름은, 가장 큰 요소들에 대해 모든 형태가 완벽하게 정렬 할 때

label{ 
    width: 150px /* fixed that is */ 
    text-align: right; 
}

이 잘 작동하지만,하지 수직선. 그러나 내용이 거의 없을 때 큰 격차가 생기고 전반적으로 결과가 충분히 유연하지 않습니다.

사람은이 문제에 대한 해결책에 대한 아이디어가 있습니까? CSS 또는 jQuery (효과적 일지는 확실하지 않음)일까요? 하지만 jQuery를위한 나의 아이디어는 특정 양식에서() .width 반복 될 것이고, 그것에서 따기 최대, (같은 페이지에 때로는 몇 가지 형태가있다) 그들의 부모 폭으로 asigning하지만 번잡 한 솔루션처럼 보인다. 좋아

출처

2012-05-30 Malyo

그 jQuery를에 만들 사소한 것입니다. 추신 당신은 테이블을 사용해야 만하는 것이 아니라고 확신합니까? – PeeHaa

내가 나를 싶지는 가능한 한 깨끗 내 HTML을 유지하게하는, 내 양식은 순수하게 수직 때로는 단지 수평 및되고 싶어 때로는 원인이 나에게 더 많은 유연성을 제공 – Malyo

, 어떻게 이것에 대해 ... 비율의 폭과 플로트 사용

: 왼쪽. 긴 레이블은 여러 행으로 묶을 것입니다 (이것은 정확히 당신이 요구 한 것이 아닙니다, 알고 있습니다).

HTML :

<form> 
    <label for="name">lka;sjdl kfa jsldkkfjlkasdjf alkdsjalkfk asdfasd asd fasdf dfdsa afsd afdsf asdfsdads jdaslk </label> 
    <input type="text" name="name"> 
    <label for="name">ljlkjljljljljlkj</label> 
    <input type="text" name="name"> 
    <label for="name">asdfasfdsasdaf</label> 
    <input type="text" name="name"> 
</form>

CSS : 난 당신이 총 폭이 상속 테두리와 마진 등 I을 설명하기에 단편적으로 100 % 미만까지 추가가 필요 찾을

form { 
    width:400px; 
} 
label { 
    width: 48%; 
    float:left; 
    clear:both; 
} 
input { 
    width: 48%; 
    float: left; 
}

49 %가 시행 착오로 작동 할 것이라고 결정했다.

는 파이어 폭스에서 테스트.

출처

2012-05-31 08:48:50

CSS의 tableless 양식

답변

관련 문제