Question

第一次这样做所以请温柔。 :)我的目标是中心的导航菜单，水平，中间列表项目中的图像。图像将会更大，因为下半部分是我公司的名称，图片的顶部可能会触及顶部。我的第一个问题是，li元素只有文本大，whitch不服务于中心的东西purpouse，第二个问题与它延伸整个菜单时相关。请问我正在寻找解决方案，其中文本位于li的中间，img位于底部。非常感谢你的帮助！

<div id="menu">
<ul>
    <li><span><a href="/1.html">Link 1</a></span></li>
    <li><span><a href="/2.html">Link 2</a></span></li>
    <span><li style="text-algin:bottom;"><a href="/3.html"><img src="Linbach_tuzka.png" height="175px" alt="Domu"></a></li></span>
    <li><span><a href="/4.html">Link 4</a></span></li>
    <li><span><a href="/5.html">Link 5</a></span></li>
</ul>
</div>

body {
width: auto;
background-image: url(blue4.jpg);
background-size: cover;
margin: 2px 0 0 0;
}

#menu {
height:210px;
line-height:36px;
margin:0 auto;
text-align:center;
width:800px;
padding:0;
}

#menu ul {
display: inline;
-webkit-padding-start: 0px;
-webkit-margin-before: 2x;
-webkit-margin-after: 0px;
margin:0;
font-size: 0;
} 


#menu ul li {
text-algin:center;
display:inline;
font-family:Arial,sans-serif;
font-size:40px;
padding:0;
margin:0;
text-decoration:none;
background-image:url(../Pics/Buttons/Menu/Menu.gif);
min-width:100px !important;
}

#menu a {
text-decoration:none;
color:#000000;
margin:10px 0;
padding:0;
}

#menu a:hover {
font-weight:bolder;
}

span {
width:100%;
font-size:30px;
}

Answer 1

唯一的选项是宽度为<a>标记：DEMO

我已从<span>删除了直接UL并添加了类'widthAuto'，因此不会影响您的徽标。

#menu a {
    text-decoration:none;
    color:#000000;
    margin:10px 0;
    padding:0;
    min-width:100px !important; display:inline-block;
}

注意：如果文字超过min-width，菜单会在悬停时拉伸。

中心的水平菜单

1 个答案: