这个想法是制作一个包含固定数量项目的菜单。每个项目都必须有一个固定的填充,以使它们在周围放置边框时看起来不错。(到目前为止一切都很好)但是这些项目必须以固定大小分布在一个 div 中,均匀分布 - 项目本身的大小不会相同,因为这取决于这些项目中的文本。
我无法弄清楚的是如何确保这些项目位于 1 行,并且它们之间的动态(或多或少)均匀间距在固定 div 内(在我的情况下为 1000px)。第一项应该排在 div 的左边缘。最后一项应该排在 div 的右边缘。
以下是我到目前为止所拥有的。这已经在它上面放置了填充和边框,但是我不能在它上面设置一个 margin: 0 auto ,我可以,但是它没有做任何事情。主要问题是它们之间的间距应该是动态的,因为项目往往会在缩放浏览器时跳跃,这反过来又会扰乱外部项目的对齐方式,甚至会使一些项目跳转到下一行。这就是为什么(缩放会使事情变得混乱 - 特别是在固定宽度的情况下)我不愿意在每个项目上放置一个实际宽度(我知道我需要一个宽度才能正确使用 margin: 0 auto ,但即使我确实使用了一个宽度,它似乎没有做我想做的事)。
<div id="navigation">
<ul>
<li class="menu-1"><a href="" >Home</a></li>
<li class="menu-2"><a href="" class="">Nieuws</a></li>
<li class="menu-3"><a href="" class="">Producten</a></li>
<li class="menu-4"><a href="" class="">Algemene informatie</a></li>
<li class="menu-5"><a href="" class="">Promoties</a></li>
<li class="menu-6"><a href="" class="">Algemene voorwaarden</a></li>
<li class="menu-7"><a href="" class="">Contact</a></li>
</ul>
</div>
#navigation ul {
margin:0px;
padding:0px;
list-style:none;
width:1000px;
display:block;
}
#navigation li {
float: left;
display:inline;
}
#navigation li a {
padding:10px 15px 10px 15px;
float:right;
display: block;
border: 0.1em solid #dcdce9;
color: #6d6f71;
text-decoration: none;
text-align: center;
font-size:18px;
font-weight:bold;
}
#navigation{
width:100%;
}