Zentrierung ul in container mit responsive web design

So, ich bin versucht zu halten, eine ungeordnete Liste zentriert, sobald die website-Besucher eine bestimmte Medien-Abfrage. Ich kann es nicht erhalten zu bleiben in der Mitte der container, wenn die Seite verschoben wird. Hier ist der dazugehörige code.

HTML

<div id="centerNav">

  <ul id="home-nav">
    <li><a href="/practice-areas/dui-defense/">DUI/DWI Defense</a></li>
    <li><a href="/practice-areas/criminal-defense/">Criminal Defense</a></li>
    <li><a href="/practice-areas/estate-planning/">Estate Planning</a></li>
    <li style="border: none;"><a href="/practice-areas/agricultural-law/"> Agricultural Law</a></li>
  </ul>

</div>

CSS

@media only screen and (max-width: 839px) 
{
#centerNav {
    margin: 0 auto;
    max-width: 840px;
    padding: 0;
    height:60px;
}

#home-nav li {
    float: left;
    position: relative;
    display: block;
    text-align: center;
    background: none;
    font-size: 20px;
    width: 158px;
    border-right: 1px solid #fff;
    margin-top: 8px;
    line-height: 1em;
    padding-left: 10px;
 }

#home-nav {
    list-style:none;
    position:relative;
    height: 60px;
    vertical-align: middle;
    z-index: 5;
    border-top: 4px double #fff; 
    border-bottom: 4px double #fff;
    border: none;
    margin: 0;
    background: #7a0426;
}

}
  • ist es richtig, anzunehmen, die Sie wollen, um center #centerNav oder wollten Sie das Zentrum der ul?
  • Ich möchte, um die Mitte der Gruppe des li ' s im Grunde. Ich dachte, ich könnte Sie in einen container um das zu erreichen, aber ich bin stecken.
  • li schweben, das ist, warum Sie nicht zentriert sind, wenn Sie können setup ein jsfiddle.net das wäre hilfreich für Menschen, diese Frage zu beantworten
  • Ich nahm den Schwimmer aus und es ist noch nicht zu bewegen. Sollte ich margin: 0 auto die ul?
InformationsquelleAutor Ryan Haslag | 2013-08-02
  1. 3

    Entfernen float von li und machen es display: inline-block

    Ich denke das wird sich lösen Ihr Problem.

    css

    #centerNav {
    margin: 0 auto;
    max-width: 840px;
    padding: 0;
    height:60px;
    text-align:center;
}

#home-nav li {
    position: relative;
    display: inline-block;
    text-align: center;
    background: none;
    font-size: 20px;
    border-right: 1px solid #fff;
    line-height: 60px;
    padding:0 10px;
 }

    jsFiddle Code

    • Es sitzt noch auf der linken Seite der Seite. Hier ist der link zu der Website. prokellseo.com/testdomian/haden-byrne
    • (es hat Ihrer änderungen auf jetzt)
    • 1) entfernen Sie den Schwimmer aus li, Nein, Tu ' float: none für diese media query. 2) text-align: center an der ul für diese media query Breite
    • können Sie bitte meine css, überprüfen Sie bitte die jsFiddle-Datei für die Hilfe
    • okay, kann man sich die site wieder. Es bewegt Sie, aber Sie sind jetzt rückwärts?
    • anzeigen, die noch Schwimmer in diesem link prokellseo.com/testdomian/haden-byrne
    • Ich weiß nicht, was du getan hast mit deinem html aber ich sehe Ihrer html-Struktur für das nav wie diese ul > div > li ungültig markup
    • Für mich ist das entfernen der Schwimmer und das hinzufügen von display: inline-block, der li Funktioniert einwandfrei., danke.-

    InformationsquelleAutor Roy Sonasish
  2. 0

    In Ihre Medien-Abfrage, müssen Sie sicherstellen, dass schweben ist keine, weil Sie schwimmen aus früheren css -

    #home-nav li {
    float: none;
    display: inline-block;
}

    Die ungeordnete Liste, enthält li, hinzufügen text-align: center

    #home-nav {
    text-align: center;
}

    Sich auch Ihre html-Struktur ist derzeit ungültig, weil Sie ein div-Element als das unmittelbare Kind einer ul. Sie können wickeln Sie das ul mit der div, wenn Sie müssen, aber es sollten auf jeden Fall nicht so, wie es jetzt

    Dass sollte das Problem beheben

    InformationsquelleAutor Huangism
Schreibe einen Kommentar