[英]How to align <li> elements on one axis in <ul>?
我创建了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元素都对齐到页面顶部。 有什么方法可以将它们在一个轴上对齐吗?
(很抱歉,如果我在语法上犯了一些错误,英语不是我的母语)
尝试: 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
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
。 因此,这意味着该代码将通过更改垂直对齐方式帮助您轻松地自定义:)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.