그들이 같은 줄에 있도록 dt와 dd의 스타일을 지정하는 방법은 무엇입니까?

CSS를 사용하여 다음 스타일을 어떻게 지정할 수 있습니까?

<dl>
    <dt>Mercury</dt>
    <dd>Mercury (0.4 AU from the Sun) is the closest planet to the Sun and the smallest planet.</dd>
    <dt>Venus</dt>
    <dd>Venus (0.7 AU) is close in size to Earth, (0.815 Earth masses) and like Earth, has a thick silicate mantle around an iron core.</dd>
    <dt>Earth</dt>
    <dd>Earth (1 AU) is the largest and densest of the inner planets, the only one known to have current geological activity.</dd>
</dl>

따라서 콘텐츠의 dt하나 개의 컬럼에 쇼와 콘텐츠의 dd각각 다른 열에, dt그리고 대응하는 dd동일한 선 상에? 즉 다음과 같은 것을 생성합니다.

수레를 사용하지 않고 해결책을 얻었습니다! codepen
에서 이것을 확인하십시오.

즉.

dl.inline dd {
  display: inline;
  margin: 0;
}
dl.inline dd:after{
  display: block;
  content: '';
}
dl.inline dt{
  display: inline-block;
  min-width: 100px;
}

업데이트 ^-2017 년 1 월 3 일 : 문제에 대한 플렉스 박스 기반 솔루션을 추가했습니다. 연결된 코드 펜 에서 확인하고 필요에 따라 수정하십시오. 감사!

dl.inline-flex {
  display: flex;
  flex-flow: row;
  flex-wrap: wrap;
  width: 300px;      /* set the container width*/
  overflow: visible;
}
dl.inline-flex dt {
  flex: 0 0 50%;
  text-overflow: ellipsis;
  overflow: hidden;
}
dl.inline-flex dd {
  flex:0 0 50%;
  margin-left: auto;
  text-align: left;
  text-overflow: ellipsis;
  overflow: hidden;
}

CSS 그리드 레이아웃

표와 마찬가지로 격자 레이아웃을 사용하면 작성자가 요소를 열과 행에 정렬 할 수 있습니다.
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout

열 크기를 변경하려면 grid-template-columns속성을 살펴보십시오 .

dl {
  display: grid;
  grid-template-columns: max-content auto;
}

dt {
  grid-column-start: 1;
}

dd {
  grid-column-start: 2;
}

<dl>
  <dt>Mercury</dt>
  <dd>Mercury (0.4 AU from the Sun) is the closest planet to the Sun and the smallest planet.</dd>
  <dt>Venus</dt>
  <dd>Venus (0.7 AU) is close in size to Earth, (0.815 Earth masses) and like Earth, has a thick silicate mantle around an iron core.</dd>
  <dt>Earth</dt>
  <dd>Earth (1 AU) is the largest and densest of the inner planets, the only one known to have current geological activity.</dd>
</dl>

Bootstrap 3 (또는 그 이전)을 사용하는 경우 ...

<dl class="dl-horizontal">
    <dt>Label:</dt>
    <dd>
      Description of planet
    </dd>
    <dt>Label2:</dt>
    <dd>
      Description of planet
    </dd>
</dl>

여백의 너비를 알고 있다고 가정하면 :

dt { float: left; width: 100px; }
dd { margin-left: 100px; }

유스 케이스에 맞는 예제를 아직 보지 못했기 때문에 실현할 수있는 가장 완벽한 솔루션이 있습니다.

dd {
    margin: 0;
}
dd::after {
    content: '\A';
    white-space: pre-line;
}
dd:last-of-type::after {
    content: '';
}
dd, dt {
    display: inline;
}
dd, dt, .address {
    vertical-align: middle;
}
dt {
    font-weight: bolder;
}
dt::after {
    content: ': ';
}
.address {
    display: inline-block;
    white-space: pre;
}

Surrounding

<dl>
  <dt>Phone Number</dt>
  <dd>+1 (800) 555-1234</dd>
  <dt>Email Address</dt>
  <dd><a href="#">example@example.com</a></dd>
  <dt>Postal Address</dt>
  <dd><div class="address">123 FAKE ST<br />EXAMPLE EX  00000</div></dd>
</dl>

Text

이상하게도 작동하지 않습니다 display: inline-block. 난 당신이 어떤의 크기를 설정해야하는 경우한다고 가정 dt요소 또는 dd요소를 사용자가 설정할 수 dl등의 디스플레이 display: flexbox; display: -webkit-flex; display: flex;와 flex의 속기 dd요소와 dt같은 같은 요소 flex: 1 1 50%와 display같은을 display: inline-block. 그러나 나는 그것을 테스트하지 않았으므로주의해서 접근하십시오.

jsFiddle 데모 보기

회사 직원이 왼쪽에 사진과 오른쪽에있는 정보를 보여주는 프로젝트에 대해 설명한대로 정확하게 목록이 필요했습니다. 매번 psuedo-elements를 사용하여 지우기를 수행했습니다 DD.

.myList dd:after {
  content: '';
  display: table;
  clear: both;
}

또한 텍스트를 부동 이미지 아래로 감싸지 않고 이미지 오른쪽에만 표시하기를 원했습니다 (의사 열 효과). 이는 태그 내용 주위에 DIVCSS가 있는 요소를 추가하여 수행 할 수 있습니다 . 이 추가 항목을 생략 할 수 있지만 태그 의 내용은 부동으로 줄 바꿈됩니다 .overflow: hidden;DDDIVDDDT

그것으로 잠시 연주 후, 나는 여러 지원 할 수 있었다 DT당 요소 DD가 아닌 여러 DD당 요소를 DT. 마지막 옵션 이후에만 지우려면 다른 선택적 클래스를 추가하려고 DD했지만 DD요소 뒤에 래핑 된 후속 요소 DT(원하는 효과는 아닙니다 ... DT및 DD요소가 열을 형성하고 여분의 DD요소가 너무 넓기를 원했습니다).

모든 권리에 의해, 이것은 IE8 +에서만 작동해야하지만, IE7의 단점 때문에 작동합니다.

다음은 dt와 dd를 인라인으로 표시 한 다음 dd 뒤에 줄 바꿈을 추가하여 작동하는 다른 옵션입니다.

dt, dd {
 display: inline;
}
dd:after {
 content:"\a";
 white-space: pre;
}

이것은 위의 Navaneeth 솔루션과 유사하지만이 방법을 사용하면 내용이 표와 같이 정렬되지 않지만 dd는 길이에 관계없이 모든 줄에서 dt를 즉시 따릅니다.

이 작업을 수행하고 <dt>콘텐츠를 기준으로 콘텐츠를 세로 중앙에 배치해야 <dd>합니다. 나는 display: inline-block함께vertical-align: middle

Codepen에 대한 전체 예를 보려면 여기를 클릭하십시오.

.dl-horizontal {
  font-size: 0;
  text-align: center;

  dt, dd {
    font-size: 16px;
    display: inline-block;
    vertical-align: middle;
    width: calc(50% - 10px);
  }

  dt {
    text-align: right;
    padding-right: 10px;
  }

  dd {
    font-size: 18px;
    text-align: left;
    padding-left: 10px;
  } 
}

dt 및 dd 요소의 스타일을 지정하는 방법에 따라 같은 높이를 만드는 데 문제가 발생할 수 있습니다. 예를 들어, 해당 요소의 맨 아래에 눈에 보이는 테두리를 원한다면 표와 같이 같은 높이에 테두리를 표시하고 싶을 것입니다.

이에 대한 한 가지 해결책은 부정 행위이며 각 행을 "dl"요소로 만듭니다. (이것은 테이블에서 tr을 사용하는 것과 같습니다.) 정의 목록의 원래 관심을 잃어 버렸지 만 상대방에서는 빠르고 스타일이 좋은 의사 테이블을 얻는 쉬운 방법입니다.

CSS :

dl {
 margin:0;
 padding:0;
 clear:both;
 overflow:hidden;
}
dt {
 margin:0;
 padding:0;
 float:left;
 width:28%;
 list-style-type:bullet;
}
dd {
 margin:0;
 padding:0;
 float:right;
 width:72%;
}

.huitCinqPts dl dt, .huitCinqPts dl dd {font-size:11.3px;}
.bord_inf_gc dl {padding-top:0.23em;padding-bottom:0.5em;border-bottom:1px solid #aaa;}

HTML :

<div class="huitCinqPts bord_inf_gc">
  <dl><dt>Term1</dt><dd>Definition1</dd></dl>
  <dl><dt>Term2</dt><dd>Definition2</dd></dl>
</div>

나에게 완벽한 솔루션을 찾았지만 추가 <div>태그가 필요 합니다. <table>표와 같이 정렬 하기 위해 태그를 사용할 필요는 없으며 사용 display:table-row;및 display:table-cell;스타일이 충분 합니다.

<style type="text/css">
dl > div {
  display: table-row;
}
dl > div > dt {
  display: table-cell;
  background: #ff0;
}
dl > div > dd {
  display: table-cell;
  padding-left: 1em;
  background: #0ff;
}
</style>

<dl>
  <div>
    <dt>Mercury</dt>
    <dd>Mercury (0.4 AU from the Sun) is the closest planet to the Sun and the smallest planet.</dd>
  </div>
  <div>
    <dt>Venus</dt>
    <dd>Venus (0.7 AU) is close in size to Earth, (0.815 Earth masses) and like Earth, has a thick silicate mantle around an iron core.</dd>
  </div>
  <div>
    <dt>Earth</dt>
    <dd>Earth (1 AU) is the largest and densest of the inner planets, the only one known to have current geological activity.</dd>
  </div>
</dl>

최근 에 인라인 요소 다음에 오는 요소에 클래스 dl-inline를 지정하여 인라인 및 비 인라인 dt / dd 쌍을 혼합 <dt>해야했습니다 <dd>.

dt.dl-inline {
  display: inline;
}
dt.dl-inline:before {
  content:"";
  display:block;
}
dt.dl-inline + dd {
  display: inline;
  margin-left: 0.5em;
  clear:right;
}

<dl>
    <dt>The first term.</dt>
    <dd>Definition of the first term. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque a placerat odio viverra fusce.</dd>
    <dt class="dl-inline">The second term.</dt>
    <dd>Definition of the second term. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque a placerat odio viverra fusce.</dd>
    <dt class="dl-inline">The third term.</dt>
    <dd>Definition of the third term. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque a placerat odio viverra fusce.</dd>
    <dt>The fourth term</dt>
    <dd>Definition of the fourth term. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque a placerat odio viverra fusce.</dd>
</dl

>

이것은 IE7 +에서 작동하며 표준을 준수하며 다른 높이를 허용합니다.

<style>
dt {
    float: left;
    clear: left;
    width: 100px;        
    padding: 5px 0;
    margin:0;
}
dd {
    float: left;
    width: 200px;
    padding: 5px 0;
    margin:0;
}
.cf:after {
    content:'';
    display:table;
    clear:both;
}
</style>

<dl class="cf">
    <dt>A</dt>
    <dd>Apple</dd>
    <dt>B</dt>
    <dd>Banana<br>Bread<br>Bun</dd>
    <dt>C</dt>
    <dd>Cinnamon</dd>
</dl>        

JSFiddle을 참조하십시오 .

이것은 그것들을 테이블로 표시하고 테두리를 가지고 작동하며 첫 번째 열의 너비와 3em으로 반응해야합니다. 단어 줄 바꿈은 열보다 넓은 단어를 나눕니다.

 dl { display:block;
      border:2px solid black;
      margin: 1em;}  
 dt { display:inline-block;
      width:3em;
      word-wrap:break-word;} 
 dd { margin-left:0;
      display:inline;
      vertical-align:top;
      line-height:1.3;} 
 dd:after { content:'';display:block; } 

비교 <table>와 <dl>:

<!DOCTYPE html>
<html>
<style>

dl { display:block;border:2px outset black;margin:1em; line-height:18px;}  
dt { display:inline-block;width:3em; word-wrap:break-word;} 

dd { margin-left:0; display:inline; vertical-align:top; line-height:1.3;} 
dd:after { content:'';display:block; } 


.glosstable { border:2px outset #aaaaaa;margin:1em; text-align:left}  
.glosstable, table, tbody,  tr,  td, dl, dt {font-size:100%; line-height:18px;}

.glossaz { font-size:140%;padding-left:2em;font-weight:bold;color: #00838c; } 
td.first {width: 2.5em;} 
</style>
<body>
Table<br>
<table class="glosstable">
  <tr><td class="first">Milk</td>
  <td class="glossdata">Black hot drink</td>
</tr>
  <tr><td class="first">Coffee2</td>
  <td class="glossdata">Black hot drink</td>
</tr>
  <tr><td>Warm milk</td>
  <td class="glossdata">White hot drink</td>
</tr>
</table>
DL list <br>
<dl class="glosstablep">
  <dt>Milk</dt>
  <dd class="glossdata">White cold drink</dd>
  <dt>Coffee2</dt>
  <dd class="glossdata">Black cold drink</dd>
  <dt>Warm Milk</dt>
  <dd class="glossdata">White hot drink</dd>
</dl>

</body>
</html>

스타일 목록을 스타일링 할 때 일반적으로 다음과 같이 시작합니다.

dt,
dd{
    /* Override browser defaults */
    display: inline;
    margin: 0;
}

dt  {
    clear:left;
    float:left;
    line-height:1; /* Adjust this value as you see fit */
    width:33%; /* 1/3 the width of the parent. Adjust this value as you see fit */
}

dd {
    clear:right;
    float: right;
    line-height:1; /* Adjust this value as you see fit */
    width:67%; /* 2/3 the width of the parent. Adjust this value as you see fit */
}

여기에서 사람들이 제안한 대부분의 작업은 작동하지만 스타일 코드에만 일반 코드를 배치하고 아래에 표시된대로 특정 코드를 html 코드에 배치해야합니다. 그렇지 않으면 부풀린 스타일 시트가 생깁니다.

내가하는 방법은 다음과 같습니다.

스타일 시트 코드 :

<style>
    dt {
        float:left;
    }
    dd {
        border-left:2px dotted #aaa;
        padding-left: 1em;
        margin: .5em;
    }   
</style>

귀하의 HTML 코드 :

<dl>
    <dt>1st Entity</dt>
    <dd style="margin-left: 5em;">Consumer</dd>
    <dt>2nd Entity</dt>
    <dd style="margin-left: 5em;">Merchant</dd>
    <dt>3rd Entity</dt>
    <dd style="margin-left: 5em;">Provider, or cToken direct to Merchant</dd>
    <dt>4th Entity</dt>
    <dd style="margin-left: 5em;">cToken to Provider</dd>
</dl>

이것처럼 보입니다