Wie-center den text im li?

Ich versuche, der gleiche Abstand zwischen vier verschiedenen li Elemente, aber ich am Ende mit diesem:

Wie-center den text im li?

HTML:

<ul><li>Inbox</li></li><li>Drafts</li></li><li>Sent</li></li><li>Trash</li></ul>

CSS:

ul li { 
     width: 25%;
     display: inline-block;
     text-align: center;
}

Ich getestet habe, die CSS und es funktioniert, wie es sollte. Ich denke, das problem ist, dass die li's haben nicht alle die gleiche Menge von Buchstaben, so dass Sie am Ende mit einige seltsame visuelle Effekte. Mein Grund für den glauben an diese:

Wie-center den text im li?

(Gleicher Abstand)

InformationsquelleAutor Hunter S | 2015-10-10
  1. 1

    Mein Ansatz mit diesem Problem ist die Mitte der li auf dem ul, da die ul wird natürlich die gleiche Breite aufweisen als die Eltern.

    ul {
    /* Use flex boxes to align li items */
    display: flex;
    justify-content: space-around;
    /* Remove default padding from major browsers */
    padding: 0;
    /* Hide the default decorations for li items */
    list-style: none;
}
ul > li {
    /* Display the elements in one line */
    display: inline-block;
}

    Check-out dieses JSFiddle, um zu sehen, dass es funktioniert.

    InformationsquelleAutor Lucio
  2. 0

    Versuchen, diese

    ul {
    width:100%;
    margin-left: 0;
    margin-bottom: 0
} 

li { 
     list-style-type: none;
    display: inline-block;
    margin-right: 20px;
}
    InformationsquelleAutor rafahell
Schreibe einen Kommentar