Làm thế nào để tạo kiểu dt và dd sao cho chúng nằm trên cùng một dòng?

Sử dụng CSS, làm cách nào tôi có thể tạo kiểu như sau:

<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>

Vì vậy, nội dung của dtchương trình trong một cột và nội dung của ddmột cột khác, với mỗi dtvà tương ứng ddtrên cùng một dòng? Tức là sản xuất một cái gì đó trông giống như:

Tôi đã có một giải pháp mà không cần sử dụng phao!
kiểm tra cái này trên codepen

Viz.

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

Cập nhật - 3 ^thứ tháng 1 năm 2017: giải pháp dựa trên tôi đã thêm flex-box cho vấn đề. Kiểm tra xem trong codepen được liên kết & tinh chỉnh nó theo nhu cầu. Cảm ơn!

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;
}

Bố cục lưới CSS

Giống như bảng, bố trí lưới cho phép tác giả sắp xếp các thành phần thành cột và hàng.
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout

Để thay đổi kích thước cột, hãy xem thuộc grid-template-columnstính.

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>

Nếu bạn sử dụng Bootstrap 3 (hoặc sớm hơn) ...

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

Giả sử bạn biết chiều rộng của lề:

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

Bởi vì tôi chưa thấy một ví dụ nào phù hợp với trường hợp sử dụng của mình, đây là giải pháp chứng minh đầy đủ nhất mà tôi có thể nhận ra.

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

Thật kỳ lạ, nó không hoạt động display: inline-block. Tôi cho rằng nếu bạn cần đặt kích thước của bất kỳ dtthành phần hoặc ddthành phần nào, bạn có thể đặt dlmàn hình hiển thị display: flexbox; display: -webkit-flex; display: flex;và tốc flexký của các ddyếu tố và các dtyếu tố như một thứ gì đó giống như flex: 1 1 50%và displaynhư display: inline-block. Nhưng tôi đã không kiểm tra điều đó, vì vậy hãy thận trọng tiếp cận.

Xem bản demo jsFiddle

Tôi cần một danh sách chính xác như được mô tả cho một dự án cho thấy nhân viên tại một công ty, với ảnh của họ ở bên trái và thông tin ở bên phải. Tôi đã quản lý để hoàn thành việc xóa bằng cách sử dụng các phần tử psuedo sau mỗi DD:

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

Ngoài ra, tôi muốn văn bản chỉ hiển thị ở bên phải của hình ảnh, mà không bao bọc dưới hình ảnh nổi (hiệu ứng cột giả). Điều này có thể được thực hiện bằng cách thêm một DIVyếu tố với CSS overflow: hidden;xung quanh nội dung của DDthẻ. Bạn có thể bỏ qua phần bổ sung này DIV, nhưng nội dung của DDthẻ sẽ nằm dưới phần nổi DT.

Sau khi chơi với nó một lúc, tôi có thể hỗ trợ nhiều DTyếu tố cho mỗi DD, nhưng không phải nhiều DDyếu tố trên mỗi DT. Tôi đã thử thêm một lớp tùy chọn khác để xóa chỉ sau phần tử cuối cùng DD, nhưng các DDphần tử tiếp theo được bao bọc bên dưới các DTphần tử (không phải hiệu ứng mong muốn của tôi. Tôi muốn các phần tử DTvà DDcác phần tử tạo thành các cột và các DDphần tử phụ quá rộng).

Theo tất cả các quyền, điều này chỉ nên hoạt động trong IE8 +, nhưng do một sự giải quyết trong IE7, nó cũng hoạt động ở đó.

Đây là một tùy chọn khác hoạt động bằng cách hiển thị nội tuyến dt và dd và sau đó thêm ngắt dòng sau dd.

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

Điều này tương tự như giải pháp của Navaneeth ở trên, nhưng sử dụng phương pháp này, nội dung sẽ không xếp hàng như trong một bảng, nhưng dd sẽ theo dt ngay lập tức trên mọi dòng bất kể độ dài.

Tôi cần phải làm điều này và có <dt>nội dung tập trung theo chiều dọc, liên quan đến <dd>nội dung. Tôi đã sử dụng display: inline-block, cùng vớivertical-align: middle

Xem ví dụ đầy đủ về Codepen tại đây

.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;
  } 
}

Tùy thuộc vào cách bạn tạo kiểu cho các phần tử dt và dd, bạn có thể gặp phải một vấn đề: làm cho chúng có cùng chiều cao. Ví dụ, nếu bạn muốn nhưng một số đường viền có thể nhìn thấy ở dưới cùng của các yếu tố đó, rất có thể bạn muốn hiển thị đường viền ở cùng độ cao, như trong bảng.

Một giải pháp cho việc này là gian lận và biến mỗi hàng thành một phần tử "dl". (điều này tương đương với việc sử dụng tr trong một bảng) Chúng tôi mất đi sự quan tâm ban đầu của các danh sách định nghĩa, nhưng trên đối tác, đây là một cách dễ dàng để có được các bảng giả nhanh chóng và đẹp mắt.

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>

Tôi đã tìm thấy một giải pháp có vẻ hoàn hảo với tôi, nhưng nó cần thêm <div>thẻ. Nó chỉ ra rằng không cần thiết phải sử dụng <table>thẻ để căn chỉnh như trong một bảng, nó đủ để sử dụng display:table-row;và display:table-cell;kiểu:

<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>

Gần đây tôi cần kết hợp các cặp dt / dd nội tuyến và không nội tuyến, bằng cách chỉ định lớp dl-inlinetrên <dt>các phần tử nên được theo sau bởi các <dd>phần tử nội tuyến .

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

>

Điều này hoạt động trên IE7 +, tuân thủ các tiêu chuẩn và cho phép các độ cao khác nhau.

<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>        

Xem JSFiddle .

cái này hoạt động để hiển thị chúng dưới dạng bảng, với đường viền, nó phải đáp ứng với 3em chiều rộng của cột đầu tiên. Từ bọc chỉ phá vỡ bất kỳ từ nào rộng hơn cột

 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; } 

So sánh <table>với <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>

Tôi thường bắt đầu với những điều sau đây khi định nghĩa kiểu dáng liệt kê dưới dạng bảng:

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 */
}

Hầu hết những gì mọi người ở đây đề xuất đều hoạt động, tuy nhiên, bạn chỉ nên đặt mã chung vào biểu định kiểu và đặt mã cụ thể vào mã html như dưới đây. Nếu không, bạn sẽ kết thúc với một phong cách cồng kềnh.

Đây là cách tôi làm điều đó:

Mã bảng kiểu của bạn:

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

Mã html của bạn:

<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>

Hình như thế này