michaelsinterface.de

2column.list

  • In diesem Experiment habe ich in einer unsortierten Aufzählungsliste <ul> jeden zweiten Listeneintrag <li> mit einem entsprechenden Außenabstand aus seinem normalen Textfluss genommen, um ihn neben dem vorangegangenen Listenpunkt auszurichten, und auf diese Weise eine zweispaltige Liste zu erzeugen.
  • Listenpunkt 1
  • Listenpunkt 2
  • Listenpunkt 3
  • Listenpunkt 4
  • Listenpunkt 5
  • Listenpunkt 6
  • Listenpunkt 7
  • Listenpunkt 8
  • Listenpunkt 9
  • Listenpunkt 10
  • Listenpunkt 11
  • Listenpunkt 12
  • Listenpunkt 13
  • Listenpunkt 14
Quellcode  
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>::: 2column.list :::</title>

<style type="text/css">
<!--
div.demoWrapBox {
width:500px;
margin:50px auto;
padding:20px 50px;
background:#f4f4f4;
border:1px solid #cacaca;
}
div.demoWrapBox ul {
list-style:none;
margin:0;
padding:0;
}
div.demoWrapBox ul li {
line-height:1.4em;
padding:0.4em 0;
font-size:1.1em;
color:#222;
border-bottom:1px solid #cacaca;
}
div.demoWrapBox ul li.rightCol {
margin-left:50%;
margin-top:-2.2em;
padding:0.4em 0;
border:0;
}
div.demoWrapBox ul li.leftCol_alt {
background:#fff;
}
-->
</style>

</head>
<body>

<div class="demoWrapBox">
     <ul>
         <li>Listenpunkt 1</li>
         <li class="rightCol">Listenpunkt 2</li>
         <li class="leftCol_alt">Listenpunkt 3</li>
         <li class="rightCol">Listenpunkt 4</li>
         <li>Listenpunkt 5</li>
         <li class="rightCol">Listenpunkt 6</li>
         <li class="leftCol_alt">Listenpunkt 7</li>
         <li class="rightCol">Listenpunkt 8</li>
         <li>Listenpunkt 9</li>
         <li class="rightCol">Listenpunkt 10</li>
         <li class="leftCol_alt">Listenpunkt 11</li>
         <li class="rightCol">Listenpunkt 12</li>
         <li>Listenpunkt 13</li>
         <li class="rightCol">Listenpunkt 14</li>
     </ul>
</div>

</body>
</html>