2011-07-04 4 views
3

내가 레이블 및 필드가 루프를 통과 어떻게 테이블

{% for field in form %} 
{{ LABEL }}{{ INPUT FIELD }} 

아래와 같은 형태 변수를 통해 반복하여 HTML 양식을 생성하고를 사용하지 않고 두 개의 열 형태의 레이아웃을 디자인 할 수 있습니다. 나는

{% for field in form %} 
    <div>{{ LABEL }}</div><div>{{ INPUT FIELD }}</div> 

에 의해 간단한 열을 생성 할 수 있습니다하지만 난 그 아래 위 라인과 필드 텍스트와 함께 2 열 레이아웃을 갖고 싶어 그래서 난 (20 개) 필드가 있습니다. http://www.w3schools.com/cssref/pr_class_float.asp

답변

3

대신 div의 각 항목을 포장, 당신이 함께 유지하려는 항목을 포장

form { width: 800px; /* or whatever */ } 
form > div { display: inline-block; width: 50%; } 
label, input { display: block; } 

당신은 조정해야 할 수도 있습니다 여백, 여백 등을 설명하는 너비. 양식 필드는 오른쪽에서 왼쪽으로 그리고 두 열의 페이지 아래로 흐를 것입니다.

-1
당신은 두 개의 열에서 컨트롤을 배치하는 CSS의 "부동"속성을 사용할 수 있습니다

...

확인이 작업을 수행 할 수있는 방법을 모른다 귀하의 레이블 및 CSS로 입력 필드. A 목록의 "구루"에 의한 표준 지침이 있습니다 : http://www.alistapart.com/articles/prettyaccessibleforms

그러나 이것은 한 줄보다 긴 레이블이있는 양식으로 손상됩니다.

레이블 목록과 요소를 (div 요소를 사용하는 대신) 정의 목록에 배치하는 것이 일반적입니다. 이러한 양식의 스타일을 지정하는 방법은 여기에서 읽을 수 있습니다. http://aspnetresources.com/blog/styling_definition_lists 그런 HTML이 여전히 의미 론적이라고 여겨지면 HTML 표준 괴짜에주의해야합니다.

{% for field in form %} 
    <div>{{ LABEL }}{{ INPUT FIELD }}</div> 

는 그런 다음 CSS에서 같은 것을 할 :

0

우리의해야 스타일 :하지만 난 루프에서

관련 문제