Question

艺术家组合网站的简单水平导航栏。我正在将它从基于jpg的站点更改为实际编码，并且需要匹配以下页面上的导航栏：

注意＆＃34;自然元素＆＃34;，＆＃34;动物照片＆＃34;和＆＃34; Henna Tattoos＆＃34;文本被堆叠（2行而不是1行）。我想在我的ul中复制这个，但似乎无法解决这个问题。

我的代码

<div id="nav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Natural Elements</a></li>
<li><a href="#">Animal Photos</a></li>
<li><a href="#">Henna Tattoos</a></li>
<li><a href="#">Murals</a></li>
<li><a href="#">Supplementary</a></li>
<li><a href="#">Non-Profit</a></li>
</ul>
</div>

CSS：

#nav ul
{
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;
}

#nav ul li { display: inline; }

#nav ul li a
{
text-decoration: none;
font-family:"Lithos";
font-size:12px;
color:c0944d;
padding: .3em 1em;
}

所以问题是如何获得＆＃34;元素＆＃34;显示在＆＃34; natural＆＃34;下面，而不会破坏列表的完整性。

提前感谢!!

Answer 1

为display:inline-block标记应用<a>并使用max-width属性设置菜单项的最大所需宽度，这将导致文本在超过指定的{时自动换行{1}}

max-length

旁注：最好在更改#nav ul li a { text-decoration: none; font-family:"Lithos"; font-size:12px; color:c0944d; padding: .3em 1em; display:inline-block; max-width:50px; }的显示时应用display:inline-block，以便横向对齐项目 - 如果您应用block之类的您已应用于display:inline，该元素将不接受<li>和width属性...

JSFiddle

水平导航栏具有不同文本行数的项目

1 个答案: