여러 개의 dd 태그를 일렬로 배열

dt에는 여러 줄의 dd가있을 수 있습니다. 불행히도 두 번째 dl 라인은 왼쪽으로 시프트됩니다. 어떻게 이것을 방지하기 위해 스타일을 조정할 수 있습니까? 나는 애플 리케이션에서 HTML을 편집 할 수 없기 때문에 이것은 단지 예일 뿐이다. 페이지 당 6에서 10 개의 dt 태그가 하나 이상의 dd를 가지기 때문에 일반적인 목적의 솔루션이어야한다.여러 개의 dd 태그를 일렬로 배열

<head> 
<style type="text/css"> 
dl { 
width:450px; 
overflow:hidden; 
background:#ff0; 
} 
dt { 
padding:0 4px 0 4px; 
float:left; 
width:125px; 
background:#cc0; 
clear: left; 
text-align: right; 
} 
dd { 
padding:0 4px 0 4px; 
margin: 0; 
float:left; 
width:250px; 
background:#dd0; 
} 
</style> 
</head> 
<body> 
    <h3>Test McTesterson</h3> 
    <dl> 
     <dt>Personal Phone</dt> <dd>555-555-5555</dd> 
     <dt>Personal Email</dt> <dd>[email protected]</dd> 
     <dt>Address</dt> <dd><span>123 Main St</span></dd><dd> <span>Cityburg</span> <span>Qa</span> <span>12345</span></dd> 
     <dt>Birthdate</dt> <dd>198</dd> 
    </dl> 
<body>

출처

2010-12-07 Tyson of the Northwest

호기심에서 벗어나이 문제가 만족스럽게 해결 되었습니까? 아니면 게시 된 솔루션과 관련하여 현저한 문제가 있습니까? –

한 가지 방법 :

dd + dd { 
    display: block; /* to force new line */ 
    margin: 0 0 0 4em; /* whatever the width of dt */ 
}

출처

2010-12-07 22:36:41

아마도 IE6이 지원 될 필요는 없다고 가정 할 때 가장 좋은 방법 일 것입니다. – BoltClock

또한 여러 dd의 사용하지 단지 하나의 dd에 모든 정보를 넣을 수 있습니다.

출처

2010-12-07 22:41:57 matthewpavkov

을 제외하고 나는 앱에서 dd를 얻었고, 자바 스크립트가 의존하는 클래스 속성을 포함하고 있기 때문에 태그를 변경하는 글을 쓰고 싶지는 않습니다. 여기에 나와 있지 않습니다. –

여러 개의 dd 태그를 일렬로 배열

답변

관련 문제