✔ ul auf ganzer Breite, gleichmäßig verteilt

[Sundermeier]

Hi,
ich möchte eine Liste in einer Liste über die ganze Breite des Bildschirms und mit gleichmäßigem Abstand zueinander erstellen.

    <nav id='footer_sitemap'>
      <ul>
        <li>
          <ul>
            <li><a href=''><b>Serien</b></a></li>
            <li><a href=''>Unterpunkt</a></li>
            <li><a href=''>Unterpunkt</a></li>
            <li><a href=''>Unterpunkt</a></li>
            <li><a href=''>Unterpunkt</a></li>
          </ul>
        </li>
        <li>
          <ul>
            <li><a href=''><b>Serien</b></a></li>
            <li><a href=''>Unterpunkt</a></li>
            <li><a href=''>Unterpunkt</a></li>
            <li><a href=''>Unterpunkt</a></li>
            <li><a href=''>Unterpunkt</a></li>
          </ul>
        </li>
        <li>
          <ul>
            <li><a href=''><b>Serien</b></a></li>
            <li><a href=''>Unterpunkt</a></li>
            <li><a href=''>Unterpunkt</a></li>
            <li><a href=''>Unterpunkt</a></li>
            <li><a href=''>Unterpunkt</a></li>
          </ul>
        </li>
        <li>
          <ul>
            <li><a href=''><b>Serien</b></a></li>
            <li><a href=''>Unterpunkt</a></li>
            <li><a href=''>Unterpunkt</a></li>
            <li><a href=''>Unterpunkt</a></li>
            <li><a href=''>Unterpunkt</a></li>
          </ul>
        </li>
        <li>
          <ul>
            <li><a href=''><b>Serien</b></a></li>
            <li><a href=''>Unterpunkt</a></li>
            <li><a href=''>Unterpunkt</a></li>
            <li><a href=''>Unterpunkt</a></li>
            <li><a href=''>Unterpunkt</a></li>
          </ul>
        </li>
      </ul>
    </nav>

#footer_sitemap
{
  background-color: #333333;
  border: 1px solid red;

}
#footer_sitemap ul
{
  background-color: #333333;
  list-style: none;
  padding: 0px;
  margin 0px;
}

#footer_sitemap li
{
  background-color: #333333;
  float: left;
}
#footer_sitemap li ul
{

}
#footer_sitemap li ul li
{
  clear: left;
}

So sieht es aktuell aus: http://serienguide.tv/content/menu/footer_sitemap.php

Die Anzahl der Listen in der übergeordneten Liste soll nicht immer bei 5 liegen. Ein width:20% würde also nicht funktionieren.

Weiß jemand eine Lösung?

 

[SpiceLab]

Die übergeordnete Liste mit CSS-Tabelleneigenschaften ausstatten

#footer_sitemap ul
{
  background-color:#333;
  list-style:none;
  padding:0;
  margin:0;
  display:table;
  width:100%
}
#footer_sitemap li
{
  background-color:#333;
  /*float:left;*/
  display:table-cell
}
#footer_sitemap li ul, #footer_sitemap li ul li
{
  display:block
}

 

[djheke]

Width 20% für li ul würde ja auch reichen. Oder?

 

[SpiceLab]

Width 20% für li ul würde ja auch reichen. Oder?

Wenn es bei fünf (übergeordneten) Listenpunkte bliebe, aber...

Die Anzahl der Listen in der übergeordneten Liste soll nicht immer bei 5 liegen. Ein width:20% würde also nicht funktionieren.

In deinem genannten Nachfahren-Selektor würde sich die 20%-Breite des <ul>-Elements relativ zur Breite seines Elternelements <li> verhalten, die aber, auf die komplette Viewport-Breite bezogen, keine 100% beträgt.

 

[djheke]

Bitte vielmals um Entschuldigung. Ich hatte leider, wie immer, nicht richtig gelesen. Na dann doch lieber display:table.
Frohe Pfingsten noch