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
}

li {
  border: 1px solid red;
  margin: 5px;
  display: flex /* hinzugefügt */
}

li > div:first-child {
  width: 100px;
  border: 1px solid green;
  /*float: left;*/ /* auskommentiert = deaktiviert */
}

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