Aynı çizgide olacak şekilde dt ve dd stilleri nasıl oluşturulur?

CSS kullanarak aşağıdakileri nasıl şekillendirebilirim:

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

yani dtbir sütundaki gösterinin içeriği ve ddbaşka bir sütundaki içeriği, her biri dtve ddaynı satırdaki karşılık gelenlerle mi? Yani şuna benzeyen bir şey üretiyoruz:

Şamandıra kullanmadan bir çözümüm var! codepen'de
kontrol et

Yani.

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

Güncelleme - ^3. Ocak 2017: Sorun için flex-box tabanlı bir çözüm ekledim. Bağlantılı kod alanında kontrol edin ve ihtiyaca göre hassaslaştırın. Teşekkürler!

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 Izgara düzeni

Tablo düzeni gibi, ızgara düzeni de yazarın öğeleri sütunlara ve satırlara hizalamasını sağlar.
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout

Sütun boyutlarını değiştirmek için grid-template-columnsözelliğe bakın.

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 (veya öncesi) kullanıyorsanız ...

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

Kenar boşluğunun genişliğini bildiğinizi varsayarsak:

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

Kullanım durumuma uygun bir örnek göremediğim için, burada gerçekleştirebildiğim en tam kanıt çözümü.

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

Garip bir şekilde, işe yaramaz display: inline-block. Sana herhangi birinin boyutunu ayarlamak gerekiyorsa varsayalım dtelemanları veya ddelemanlar, sen ayarlayabilirsiniz dlolarak 'ın ekranı display: flexbox; display: -webkit-flex; display: flex;ve flexbir steno ddelemanları ve dtbenzeri bir şey olarak unsurları flex: 1 1 50%ve displaysıra display: inline-block. Ama bunu test etmedim, bu yüzden dikkatle yaklaşın.

Bkz. JsFiddle demosu

Bir şirketteki çalışanları, soldaki fotoğrafları ve sağdaki bilgileri gösteren bir proje için açıklandığı gibi bir listeye ihtiyacım vardı. Ben her sonra psuedo elemanları kullanarak takas başardı DD:

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

Buna ek olarak, metnin kayan görüntünün altına (sahte sütun efekti) sarılmadan görüntünün sadece sağında görüntülenmesini istedim. Bu , etiketin içeriğine DIVCSS içeren bir öğe eklenerek gerçekleştirilebilir . Bunu fazladan çıkarabilirsiniz , ancak etiketin içeriği kayan öğenin altına sarılır .overflow: hidden;DDDIVDDDT

Onunla bir süre oynadıktan sonra, birden desteklemek başardı DTbaşına unsurları DDdeğil, birden DDbaşına unsurları DT. Sadece sondan sonra temizlemek için başka bir isteğe bağlı sınıf eklemeye çalıştım DD, ancak daha sonra DDelemanların altına sarılmış DTöğeler (benim istenen etki değil ... DTve DDöğeleri sütunlar oluşturmak istedim ve ekstra DDöğeleri çok geniş).

Tüm haklarına göre, bu sadece IE8 + 'da çalışmalıdır, ancak IE7'deki bir tuhaflık nedeniyle orada da çalışır.

İşte dt ve dd satır içi görüntüleyerek ve dd'den sonra satır sonu ekleyerek çalışan başka bir seçenek.

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

Bu, Navaneeth'in yukarıdaki çözümüne benzer, ancak bu yaklaşımı kullanarak, içerik bir tabloda olduğu gibi sıralanmayacaktır, ancak dd, uzunluktan bağımsız olarak her satırda dt'yi hemen takip edecektir.

Bunu yapmam ve <dt>içeriğe göre içeriği dikey olarak ortalamam gerekiyor <dd>. display: inline-blockBirlikte kullandımvertical-align: middle

Codepen ile ilgili tüm örneği burada görebilirsiniz

.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 ve dd öğelerini nasıl şekillendirdiğinize bağlı olarak, bir sorunla karşılaşabilirsiniz: bunları aynı yüksekliğe getirme. Örneğin, bu öğelerin altında görünür bir kenarlık istiyorsanız, ancak kenarlığı bir tabloda olduğu gibi aynı yükseklikte görüntülemek isteyebilirsiniz.

Bunun için bir çözüm hile yapmak ve her satırı bir "dl" elemanı yapmak. (bu, tablodaki tr kullanımına eşdeğerdir) Tanım listelerinin orijinal ilgisini kaybederiz, ancak muadili bu, hızlı ve oldukça stil sahibi sahte tablolar almanın kolay bir yoludur.

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>

Benim için mükemmel görünen bir çözüm buldum, ancak ekstra <div>etiketlere ihtiyacı var . <table>Tablodaki gibi hizalamak için etiket kullanmanın gerekli olmadığı , kullanması display:table-row;ve display:table-cell;stilleri yeterlidir :

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

Geçenlerde satır içi ve satır içi olmayan dt / dd çiftleri, satır içi elemanları tarafından izlenmesi gereken öğeler dl-inlineüzerinde sınıf belirterek <dt>gerekiyordu <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

>

Bu IE7 + üzerinde çalışır, standartlara uygundur ve farklı yüksekliklere izin verir.

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

Bkz. JSFiddle .

bu kenarlık ile tablo olarak görüntülemek için çalışır, ilk sütunun genişliği 3em ile duyarlı olmalıdır. Sözcük kaydırma, sütundan daha geniş olan tüm kelimeleri kırar

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

Karşılaştırılması <table>ile <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>

Tanım tablolarını tablo olarak şekillendirirken genellikle aşağıdakilerle başlarım:

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

Buradaki insanların önerdiği şeylerin çoğu çalışır, ancak genel kodu yalnızca stil sayfasına yerleştirmeli ve belirli kodu aşağıda gösterildiği gibi html koduna yerleştirmelisiniz. Aksi takdirde şişirilmiş bir stil sayfası elde edersiniz.

İşte nasıl yaparım:

Stil sayfası kodunuz:

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

Html kodunuz:

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

Buna benzer