<dl>의 그림과 같이 스타일을 지정하는 방법은 무엇입니까?

내가 <dl> 있고,이 같이하는 스타일을 할 수 없습니다<dl>의 그림과 같이 스타일을 지정하는 방법은 무엇입니까?

image of desired styling

이 같은 정의 목록 스타일을 할 수 있습니까? 아니면 더 좋은 생각이 테이블일까요?

2010-01-21 DJPython

물론, 당신은 (외부 소스에서 CSS와 offcourse)이 같은 갈 수

<style type="text/css"> 
    dt { 
     width: 200px; 
     float: left; 
     clear: left; 
    } 
</style> 

<dl> 
    <dt>Test:</dt> 
    <dd>Hallo, this is a test</dd> 
    <dt>Test:</dt> 
    <dd>Hallo</dd> 
    <dt>Test:</dt> 
    <dd>Hallo</dd> 
</dl>

출처

2010-01-21 15:35:44 fijter

'dt '당 두 개 이상의'dd'가 있으면 재미있을 것입니다. 이 문제를 해결하려면 또 다른 CSS 규칙'dd {margin-left : 200px;} '를 추가 할 수 있습니다. – naivists

@ naivists : 이것은 더 긴

항목을 후속 라인으로 처리하는 데에도 필요합니다. 당신은 당신의 코멘트 이전에 나의 대답의 일부로 이것을 추가 한 것을 볼 수있을 것입니다. –

D4V360 거의 있었다.

<style type="text/css"> 
    dt { 
     width: 200px; 
     float: left; 
     clear: left; 
    } 
    dd { margin-left: 200px; } 
</style> 

<dl> 
    <dt>First Item</dt> 
    <dd>This is the first item</dd> 

    <dt>Second Item</dt> 
    <dd>This is the second item</dd> 

    <dt>Third Item</dt> 
    <dd>Lorem ipsum dolor sit amet... lots more text here...</dd> 

    <dt>Fourth Item</dt> 
    <dd>Last item</dd> 
</dl>

참고 dd 요소의 margin-left 값 dt 소자의 width 값과 동일해야한다 :이 변수는 (링크 된 이미지의 예처럼) 다음 줄로 넘어 이상 항목을 처리 할 . 이것은 더 긴 항목에 대한 후속 행이 올 Y 른 지점에서 시작하게하는 원인입니다. 두 값을 함께 조정하여 원하는 간격을 확보하십시오.

출처

2010-01-21 15:45:43

"Post Your Answer"를 칠 때 나는 이것을 보았습니다. 맞습니다. 주위의 다른 부유 요소들과도 작동하는 것처럼 보입니다. IE6는 평소처럼 약간의 마진 문제가 있습니다. –

그래, 나는 요즘 IE6 문제에 신경 쓰지 않는다. 이 경우, 일반적으로 조건부로 포함 된 weirdo 스타일 시트를 사용할 수 있다고 생각합니다. –

거의 괜찮습니다.하지만 이제는 다음과 같이 보입니다 : http://img32.imageshack.us/img32/7740/nowlook.png - 이미지 비교 첫 번째로. – DJPython

이 기본적으로 작동합니다

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html lang="en"> 
<head><title></title> 
<style type="text/css"><!-- 
dt{ 
    border: 1px solid green; 
    float: left; 
    clear: left; 
    width: 200px; 
    margin: 0 0 10px 0; 
    padding: 0; 
} 
dd{ 
    border: 1px solid red; 
    margin: 10px 0 10px 210px; 
    padding: 0; 
} 
--></style> 
</head> 
<body> 

<dl> 
    <dt>Praesent dapibus posuere nulla:</dt> 
     <dd>Eu varius lorem fringilla a.</dd> 
    <dt>Integer id magna ut orci condimentum:</dt> 
     <dd>Quisque pulvinar purus quis nibh luctus fermentum.</dd> 
     <dd>Donec pretium quam id quam bibendum quis blandit tellus blandit.</dd> 
     <dd>Vestibulum dignissim nunc et felis luctus dictum.</li> 
    <dt>Cras nec nisl in libero:</dt> 
     <dd>Vulputate dignissim a commodo ligula.</dd> 
    <dt>Integer ut orci vitae lectus eleifend mattis:</dt> 
     <dd>Suspendisse ut lorem diam, vel pharetra urna. Vestibulum ultricies, magna at placerat lacinia, nibh mauris pharetra risus, et imperdiet arcu elit sit amet arcu. Sed enim turpis, sodales non facilisis sed, mollis sed quam. Integer quam neque, dapibus et viverra sed, pulvinar vitae odio. Vestibulum hendrerit pellentesque tortor a facilisis.</dd> 
</dl> 

</body> 
</html>

그것은하지만, IE6에서 Double Margin Float Bug을 트리거합니다.

출처

2010-01-21 15:55:48

<dl>의 그림과 같이 스타일을 지정하는 방법은 무엇입니까?

답변

관련 문제