我得到了这个菜单,我需要所有元素的宽度相同 (155px)。 但我似乎没有以正确的方式去做,我会很感激一些提示和可能的解决方案。
#menu {
width: 1000px;
height: 625px;
text-transform: uppercase;
text-align: left;
font-size: 10px;
margin: 0 auto;
font-family: 'Raleway', sans-serif;
font-weight: 400;
}
#menu span {
padding-left: 11px;
}
#menu ul {
margin: 0;
padding: 25px 0 0 0;
}
#menu li {
background: url(../img/menu_dots.jpg) no-repeat;
display: inline;
padding-bottom: 614px;
padding-top: 25px;
width: 155px;
}
#menu li a {
text-decoration: none;
color: #D1D3D4;
}
#menu li a:hover {
color: #000;
font-weight: 700;
}
#menu li .current {
color: #000;
font-weight: 700;
}
<div id="menu">
<ul>
<li><a href="index.html" class="current"><span>OCTO</span></a>
</li>
<li><a href="equipa.html"><span>EQUIPA</span></a>
</li>
<li><a href="reconhecimento.html"><span>RECONHECIMENTO</span></a>
</li>
<li><a href="parceiros.html"><span>PARCEIROS</span></a>
</li>
<li><a href="porque_nao.html"><span>PORQUE NÃO?</span></a>
</li>
<li><a href="contactos.html"><span>CONTACTOS</span></a>
</li>
</ul>
</div>
最佳答案
最简单的解决方案是将列表项 ( #menu li
) 上的显示从 inline
更改为至 inline-block
.
#menu {
width: 1000px;
height: 625px;
text-transform: uppercase;
text-align: left;
font-size: 10px;
margin: 0 auto;
font-family: 'Raleway', sans-serif;
font-weight: 400;
}
#menu span {
padding-left: 11px;
}
#menu ul {
margin: 0;
padding: 25px 0 0 0;
}
#menu li {
background: url(../img/menu_dots.jpg) no-repeat;
display: inline-block;
padding-bottom: 614px;
padding-top: 25px;
width: 155px;
}
#menu li a {
text-decoration: none;
color: #D1D3D4;
}
#menu li a:hover {
color: #000;
font-weight: 700;
}
#menu li .current {
color: #000;
font-weight: 700;
}
<div id="menu">
<ul>
<li><a href="index.html" class="current"><span>OCTO</span></a>
</li>
<li><a href="equipa.html"><span>EQUIPA</span></a>
</li>
<li><a href="reconhecimento.html"><span>RECONHECIMENTO</span></a>
</li>
<li><a href="parceiros.html"><span>PARCEIROS</span></a>
</li>
<li><a href="porque_nao.html"><span>PORQUE NÃO?</span></a>
</li>
<li><a href="contactos.html"><span>CONTACTOS</span></a>
</li>
</ul>
</div>
关于html - 不能使用特定宽度 - CSS 菜单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29396896/