如何對齊 <li> 一軸上的元素 <ul> ？

Question

我創建了ul元素。 這些是我的導航欄的html和CSS：

HTML：

    <ul id="list-nav">
<li><a href="index.html"><img src="http://s20.postimg.org/w5uddizg9/small.png"></a>

</li>
<li><a href="Marsrutas.html">Maršrutas</a>

</li>
<li><a href="Nuotraukos.html">Nuotaukos</a>

</li>
<li><a href="Apie zygi.html">Apie žygį</a>

</li>
<li><a href="Apie mane.html">Apie mane</a>

</li>
<li><a href="Dviraciai.html">Dviračiai</a>

</li>
<li><a href="Kontaktai.html">Kontaktai</a>

</li>

CSS：

            ul#list-nav {
    margin:auto;
    padding:0;
    list-style:none;
    width:525px;
}
ul#list-nav li {
    display:inline text-align: center;
}
ul#list-nav li a {
    text-decoration:none;
    padding:5px 0;
    width:auto;
    color:#eee;
    float:left;
    margin:5px;
}
ul#list-nav li a {
    text-align:center;
    border: 1px solid transparent;
}
ul#list-nav li a:hover {
    border-width: 1px;
    border-style: solid;
    border-color: #FFFFFF;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

小提琴

如您所見，所有li元素都對齊到頁面頂部。 有什么方法可以將它們在一個軸上對齊嗎？

（很抱歉，如果我在語法上犯了一些錯誤，英語不是我的母語）

Answer 1

嘗試： http : //jsfiddle.net/lotusgodkk/6hPLK/7/

   ul#list-nav {
        margin:auto;
        padding:0;
        list-style:none;
        width:525px;
        display:block;
    }
    ul#list-nav li {
        display:inline;
       text-align: center;
        vertical-align:middle;
    }
    ul#list-nav li a {
        text-decoration:none;
        padding:5px 0;
        width:auto;
        color:#eee;    
        margin:5px;
        display:inline-block;
        vertical-align:middle;
    }
    ul#list-nav li a img {
        vertical-align:middle;
    }

從錨上移除浮子，並使用display：inline-block。 添加了vertical-align:middle圖像，li和錨點vertical-align:middle

Answer 2

ul#list-nav {
    margin: auto;
    padding: 0;
    list-style: none;
    width: 525px;
    display: table;
    }

ul#list-nav li {
  display: table-cell;
  vertical-align: bottom;
}

這將使其根據需要在單軸上對齊：)

它能做什么？

我已經將table添加到ul並將table-cell到li 。 使列表項在同一軸上對齊。 vertical-align: bottom用於提及軸。

與您在問題中提到的單軸有些混淆。 如果您想在中間顯示列表項，請使用vertical-align: middle 。 因此，這意味着該代碼將通過更改垂直對齊方式幫助您輕松地自定義：)