如何使项目之间的变量空间的一个菜单 [英] how to make a ul li css menu with variable space between items

问题描述

这个想法是做一个固定数量项目的菜单。每个项目必须有一个固定的填充，以使它们看起来体面时，边框周围。 （到目前为止那么好）
但是这些项目必须分布在一个固定大小的div，均匀间隔 - 项目本身不会是相同的大小，因为这取决于这些项目中的文本。 / p>

我不知道的是如何确保项目在一行上，动态（或多或少）均匀间距在一个固定的div在我的case 1000px）。第一个项目应该排列到div的左边缘。最后一个项目应该排列到div的右边缘。

下面是我到目前为止。这已经把垫和边框上，但我不能设置一个边距：0自动上，它可以，但它不做任何事情。主要的问题是，之间的间距应该是动态的，因为项目趋向于在浏览器的缩放，这反过来弄乱了外部项目的对齐，甚至使一些项目跳到下一行跳。这就是为什么（缩放搞乱了事情 - 特别是固定宽度）我不愿意在每个项目上放一个实际的宽度（我知道我需要一个宽度使用边距：0自动正确，但即使当我使用宽度，它似乎不做我想要它做的）。

 < div id =navigation> 
< ul> 
< li class =menu-1>< a href =>首页< / 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 =>促销< / a>< / li> 
< li class =menu-6>< a href =class => Algemene voorwaarden< / a>< / li> 
< li class =menu-7>< a href =class =>联系人< / 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％; 
} 
  

解决方案

最简单的是使用一个表而不是li项：您可以定义表的宽度和单元格的宽度将被自动计算。

你可以选择给他们的宽度在％或决定让他们按比例调整。

不需要害怕表格：有时他们做得更简单。

The idea is to make a menu with a fixed amount of items. Each of the items must have a fixed padding on them to make them look decent when placing a border around them. (so far so good) But these items must be spread out in a div with a fixed size, spaced evenly - the items themselves won't be the same size as this is dependent on the text within these items.

What I can't figure out is how to make sure that the items are on 1 line with a dynamic (more or less) evenly spacing between them within a fixed div (in my case 1000px). The first item should be lined out to the left edge of the div. The last item should be lined out to the right edge of the div.

Below is what I have so far. This already puts the padding and border on it, but I can't set a margin: 0 auto on it, well I can, but it doesn't do anything. The main issue is that the spacing in between should be dynamic because the items tend to jump upon zooming the browser which in turn messes up the alignment of the outer items and even makes some items jump to the next line. That's why (zooming messes things up - especially with fixed widths) I'm reluctant to put an actual width on each of the items (I know I need a width to use margin: 0 auto properly, but even when I do use a width, it doesn't seem to do what I want it to do).

<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%;
}

解决方案

The simplest would be to use a table instead of li items : you can define the table width and the cell widths will be automatically computed.

You can choose to give them width in % to have them equal or decide to let them proportionally adapted.

No need to be afraid of tables : sometimes they do the job simpler.

这篇关于如何使项目之间的变量空间的一个菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！