Aynı hat üzerinde nasıl stil dt ve dd?

SORU

11 Kasım 2009, ÇARŞAMBA

Aynı hat üzerinde nasıl stil dt ve dd?

Kullanarak, aşağıdaki nasıl stil verebilirim: 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>

yani bir sütundaki dt gösteri ve başka bir sütuna dd içeriği, içerik, dt ve aynı satırda dd Her ile ilgili? I. e. benzer bir şey üreten:

table format

CEVAP

11 Kasım 2009, ÇARŞAMBA

* {
  padding: 0;
  margin: 0
}
dl {
  width: 100%;
  overflow: hidden;
  background: #ff0;
}
dt {
  float: left;
  width: 50%;
  /* adjust the width; make sure the total of both is 100% */
  background: #cc0;
}
dd {
  float: left;
  width: 50%;
  /* adjust the width; make sure the total of both is 100% */
  background: #dd0
}

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

Bunu Paylaş: