Bagaimana gaya dt dan dd sehingga mereka berada di jalur yang sama?

Menggunakan CSS, bagaimana saya bisa menata yang berikut:

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

jadi konten dtacara di satu kolom dan konten dddi kolom lain, dengan masing-masing dtdan yang sesuai ddpada baris yang sama? Yaitu memproduksi sesuatu yang terlihat seperti:

Saya sudah mendapat solusi tanpa menggunakan pelampung!
periksa ini pada codepen

Yaitu.

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

Update - 3 ^rd 2017 Jan: solusi berbasis Saya telah menambahkan flex-kotak untuk masalah tersebut. Periksa bahwa dalam codepen tertaut & perbaiki sesuai kebutuhan. Terima kasih!

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

Tata letak Grid CSS

Seperti tabel, tata letak kotak memungkinkan penulis untuk menyelaraskan elemen ke dalam kolom dan baris.
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout

Untuk mengubah ukuran kolom, lihat grid-template-columnsproperti.

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>

Jika Anda menggunakan Bootstrap 3 (atau lebih lama) ...

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

Dengan asumsi Anda tahu lebar margin:

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

Karena saya belum melihat contoh yang berfungsi untuk kasus penggunaan saya, berikut adalah solusi paling lengkap yang dapat saya sadari.

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="#">[email protected]</a></dd>
  <dt>Postal Address</dt>
  <dd><div class="address">123 FAKE ST<br />EXAMPLE EX  00000</div></dd>
</dl>

Text

Anehnya, itu tidak berhasil display: inline-block. Saya kira bahwa jika Anda perlu mengatur ukuran dtelemen atau ddelemen, Anda dapat mengatur dltampilan sebagai display: flexbox; display: -webkit-flex; display: flex;dan flexsingkatan dari ddelemen dan dtelemen sebagai sesuatu seperti flex: 1 1 50%dan displaysebagai display: inline-block. Tapi saya belum mengujinya, jadi dekati dengan hati-hati.

Lihat demo jsFiddle

Saya membutuhkan daftar persis seperti yang dijelaskan untuk proyek yang menunjukkan karyawan di sebuah perusahaan, dengan foto mereka di sebelah kiri, dan informasi di sebelah kanan. Saya berhasil menyelesaikan kliring dengan menggunakan psuedo-elements setelah setiap DD:

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

Selain itu, saya ingin teks hanya ditampilkan di sebelah kanan gambar, tanpa membungkus di bawah gambar melayang (efek pseudo-kolom). Ini dapat dilakukan dengan menambahkan DIVelemen dengan CSSoverflow: hidden; sekitar konten DDtag. Anda dapat menghilangkan ini ekstra DIV, tetapi konten DDtag akan membungkus di bawah mengambang DT.

Setelah bermain dengannya sebentar, saya dapat mendukung beberapa DTelemen per DD, tetapi tidak beberapa DDelemen per DT. Saya mencoba menambahkan kelas opsional lain untuk menghapus hanya setelah yang terakhir DD, tetapi DDelemen berikutnya dibungkus denganDT elemen (bukan efek yang saya inginkan ... Saya ingin DTdan DDelemen membentuk kolom, dan DDelemen tambahan terlalu lebar).

Dengan semua hak, ini seharusnya hanya berfungsi di IE8 +, tetapi karena kekhasan di IE7 ia bekerja di sana juga.

Berikut opsi lain yang berfungsi dengan menampilkan dt dan dd sebaris dan kemudian menambahkan jeda baris setelah dd.

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

Ini mirip dengan solusi Navaneeth di atas, tetapi menggunakan pendekatan ini, konten tidak akan berbaris seperti dalam tabel, tetapi dd akan mengikuti dt segera di setiap baris tanpa memperhatikan panjangnya.

Saya perlu melakukan ini dan memiliki <dt>konten yang terpusat secara vertikal, relatif terhadap <dd>konten. Saya menggunakan display: inline-block, bersama denganvertical-align: middle

Lihat contoh lengkap tentang Codepen di sini

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

Bergantung pada bagaimana Anda mengatur elemen dt dan dd, Anda mungkin mengalami masalah: membuatnya memiliki ketinggian yang sama. Misalnya, jika Anda ingin tetapi beberapa perbatasan terlihat di bagian bawah elemen-elemen itu, Anda mungkin ingin menampilkan perbatasan pada ketinggian yang sama, seperti dalam sebuah tabel.

Salah satu solusi untuk ini adalah menipu dan membuat setiap baris elemen "dl". (Ini setara dengan menggunakan tr dalam sebuah tabel) Kami kehilangan minat asli dari daftar definisi, tetapi pada counterpart ini adalah cara yang mudah untuk mendapatkan pseudo-tables yang cepat dan cukup bergaya.

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

THE HTML:

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

Saya telah menemukan solusi yang menurut saya sempurna, tetapi perlu <div>tag tambahan . Ternyata tidak perlu menggunakan <table>tag untuk menyelaraskan seperti pada tabel, cukup untuk digunakan display:table-row;dan display:table-cell;gaya:

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

Baru-baru ini saya perlu mencampur pasangan inline dan non-inline dt / dd, dengan menentukan kelas dl-inlinepada <dt>elemen yang harus diikuti oleh <dd>elemen inline .

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

>

Ini berfungsi pada IE7 +, memenuhi standar, dan memungkinkan ketinggian yang berbeda.

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

Lihat JSFiddle .

ini berfungsi untuk menampilkan mereka sebagai tabel, dengan perbatasan, itu harus responsif dengan lebar kolom pertama. Pembungkus kata hanya memecah kata-kata yang lebih luas dari kolom

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

Perbandingan <table>dengan <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>

Saya biasanya mulai dengan yang berikut ini ketika definisi definisi daftar sebagai tabel:

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

Sebagian besar yang disarankan orang di sini berfungsi, namun Anda hanya boleh menempatkan kode generik ke dalam style sheet, dan menempatkan kode spesifik ke dalam kode html seperti yang ditunjukkan di bawah ini. Kalau tidak, Anda akan berakhir dengan style sheet yang membengkak.

Inilah cara saya melakukannya:

Kode style sheet Anda:

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

Kode html Anda:

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

Terlihat seperti ini