Jak stylizować dt i dd, aby były na tej samej linii?

Używając CSS, jak mogę stylizować następujące elementy:

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

więc treść dtprzedstawienia w jednej kolumnie i zawartość ddinnej kolumny, z których każda dti odpowiadająca ddjej linia znajdują się w tym samym wierszu? Tj. Produkuję coś, co wygląda:

Mam rozwiązanie bez użycia pływaków!
sprawdź to na codepen

Mianowicie.

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

Aktualizacja - 3 ^rd stycznia 2017: rozwiązanie oparte Dodałem flex-box dla problemu. Sprawdź to w połączonym codepen i popraw go zgodnie z potrzebami. Dzięki!

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

Układ siatki CSS

Podobnie jak tabele, układ siatki umożliwia autorowi wyrównywanie elementów w kolumnach i wierszach.
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout

Aby zmienić rozmiary kolumn, spójrz na grid-template-columnswłaściwość.

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>

Jeśli używasz Bootstrap 3 (lub wcześniejszego) ...

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

Zakładając, że znasz szerokość marginesu:

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

Ponieważ jeszcze nie widziałem przykładu, który działa w moim przypadku użycia, oto najbardziej kompletne rozwiązanie, jakie udało mi się zrealizować.

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

O dziwo, to nie działa display: inline-block. Podejrzewam, że jeśli chcesz ustawić rozmiar któregokolwiek z dtelementów lub ddelementów, możesz ustawić dlwyświetlanie jako display: flexbox; display: -webkit-flex; display: flex;oraz flexskrót ddelementów i dtelementów jako coś podobnego flex: 1 1 50%i displayjako display: inline-block. Ale nie testowałem tego, więc podejdź ostrożnie.

Zobacz demo jsFiddle

Potrzebowałem listy dokładnie takiej, jak opisano dla projektu, który pokazywał pracownikom firmy, ich zdjęcie po lewej stronie i informacje po prawej stronie. Udało mi się to osiągnąć, stosując elementy psuedo po każdym DD:

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

Ponadto chciałem, aby tekst był wyświetlany tylko po prawej stronie obrazu, bez zawijania pod pływającym obrazem (efekt pseudokolumny). Można to osiągnąć przez dodanie DIVelementu z CSS overflow: hidden;wokół zawartości DDznacznika. Możesz pominąć to dodatkowe DIV, ale zawartość DDtagu zawinie się pod zmiennoprzecinkową DT.

Po dłuższej zabawie byłem w stanie obsłużyć wiele DTelementów na DD, ale nie wiele DDelementów na DT. Próbowałem dodać kolejną opcjonalną klasę do wyczyszczenia dopiero po ostatnim DD, ale kolejnych DDelementach zawiniętych pod DTelementy (nie mój pożądany efekt… Chciałem, aby elementy DTi DDtworzyły kolumny, a dodatkowe DDelementy były zbyt szerokie).

Według wszystkich praw powinno to działać tylko w IE8 +, ale z powodu dziwactwa w IE7 to również tam działa.

Oto kolejna opcja, która działa, wyświetlając dt i dd w linii, a następnie dodając podział linii po dd.

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

Jest to podobne do powyższego rozwiązania Navaneeth, ale przy takim podejściu zawartość nie będzie zgodna jak w tabeli, ale dd będzie podążać za dt natychmiast w każdej linii, niezależnie od długości.

Muszę to zrobić, a <dt>zawartość powinna być wyśrodkowana pionowo względem <dd>zawartości. Użyłem display: inline-blockrazem zvertical-align: middle

Zobacz pełny przykład na Codepen tutaj

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

W zależności od stylu elementów dt i dd możesz napotkać problem: ustawienie ich na tej samej wysokości. Na przykład, jeśli chcesz, ale widoczna ramka na dole tych elementów, najprawdopodobniej chcesz wyświetlić ramkę na tej samej wysokości, jak w tabeli.

Jednym z rozwiązań jest oszustwo i uczynienie każdego wiersza elementem „dl”. (jest to równoważne z użyciem tr w tabeli) Tracimy pierwotne zainteresowanie listami definicji, ale w odpowiedniku jest to łatwy sposób na uzyskanie pseudo-tabel, które są szybko i ładnie zaprojektowane.

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>

Znalazłem rozwiązanie, które wydaje mi się idealne, ale wymaga dodatkowych <div>tagów. Okazuje się, że nie trzeba używać <table>tagu do wyrównywania jak w tabeli, wystarczy użyć display:table-row;i display:table-cell;stylów:

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

Niedawno potrzeby mieszać rolki i bez rolki dt / dd pary poprzez określenie klasy dl-inlineod <dt>elementów, które powinny być stosowane przez wbudowanymi <dd>elementami.

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

>

Działa na IE7 +, jest zgodny ze standardami i pozwala na różne wysokości.

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

Zobacz JSFiddle .

to działa, aby wyświetlić je jako tabelę, z ramką, powinno reagować z 3em szerokości pierwszej kolumny. Zawijanie wyrazów dzieli tylko słowa szersze niż kolumna

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

Porównanie <table>z <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>

Zwykle zaczynam od następujących czynności, gdy style definiuje listy jako tabele:

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

Większość sugerowanych przez ludzi tutaj działa, jednak należy umieszczać tylko ogólny kod w arkuszu stylów, a konkretny kod w kodzie HTML, jak pokazano poniżej. W przeciwnym razie skończysz z rozdętym arkuszem stylów.

Oto jak to robię:

Twój kod arkusza stylów:

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

Twój kod 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>

Wygląda tak