tutorials.de - Ausrichtungsproblem

by SpiceLab

HTML

<ul>
  <li>
    <div class="item-date">12.4.2016</div>
    <div class="item-title"><a href="..." target="_blank">Testeintrag: Nur so zum testen, ob die Ausrichtung stimmt</a></div>
  </li>
  <li>
    <div class="item-date">13.4.2016</div>
    <div class="item-title"><a href="http://n8waechter.info/2016/04/krieg-gegen-bargeld-eskaliert-japan-testet-fingerabdruecke-als-geld" target="_blank">Krieg gegen Bargeld eskaliert: Japan testet Fingerabdrücke als “Geld“</a></div>
  </li>
<ul>

CSS

ul {
  width:100%;
  border:1px solid black;
  box-sizing:border-box
}

li {
  border:1px solid red;
  margin:5px 0;
  display:table;
  table-layout:fixed;
  width:100%;
  box-sizing:border-box 
}

li > div {
  display:table-cell;
  cellspacing:5px
}

li div:first-child {
  width:100px;
  border:1px solid green;
}

li > div:last-child {
  border:1px solid blue;
}