MrMurphy1: ul Li untereinander und nebeneinander

Beitrag lesen

SELF-Forum

ul Li untereinander und nebeneinander

MrMurphy1
– Informationen zu den Bewertungsregeln

Hallo,

ich habe mal eine Beispieldatei erstellt:

<!DOCTYPE html>
<html lang="de">
<head>
   <meta charset="utf-8">
   <title>dl-Liste</title>
   <meta name="description" content="HTML5, CSS3">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <style>

   /* Clearfix - für Float, falls erforderlich */
      dl:before,
      dl:after,
      .clearfix:before,
      .clearfix:after {
         content: "";
         display: table;
      }
      dl:after,
      .clearfix:after {
         clear: both;
      }

      * {
         -moz-box-sizing: border-box;
         box-sizing: border-box;
      }
      html {
         font-size: 100%;
      }
      body {
         padding: 0;
      }
      dl {
         width: 50%;
         border: 1px solid silver;
      }
      dt {
         float: left;
         width: 25%;
         padding: 0;
         border: 1px solid blue;
         margin: 0;
      }
      dd {
         float: left;
         width: 25%;
         padding: 0;
         border: 1px solid green;
         margin: 0;
      }
   </style>
</head>
<body>
   <dl>
      <dt>titel1</dt>
      <dd>titel1a</dd>
      <dd>titel1b</dd>
      <dd>titel1c</dd>
      <dt>titel2</dt>
      <dd>titel2a</dd>
      <dd>titel2b</dd>
      <dd>titel2c</dd>
      <dt>titel3</dt>
      <dd>titel3a</dd>
      <dd>titel3b</dd>
      <dd>titel3c</dd>
   </dl>
</body>
</html>

Die Breiten, Abstände und Ränder kannst du einfach anpassen.

Gruss

MrMurphy

Beitrag melden
–
Informationen zu den Bewertungsregeln