拉伸UL列表作为水平导航条均匀间隔...外边缘也有空格

I spent a good chunk of the evening trying to get a horizontal navigation bar and managed to get it set up and centered, thanks to this tip. However, this code gives items that are evenly spaced and pressed up against the edges of the page (or region, or div, or whatever they're inside).

我花了很多时间试图获得一个水平导航栏,并设法让它设置和居中,这要归功于这个提示。但是,此代码提供均匀间隔并按下页面边缘(或区域,div或其他任何内容)的项目。

What I'd like is for them to be evenly spaced across what they are inside AND for spaces of the same size to appear on the outer margins, i.e. before the first and after the last items, as well.

我想要的是让它们在它们内部均匀分布,并且相同大小的空间出现在外边缘上,即在第一个项目之前和最后一个项目之后。

For reference, here's my HTML:

作为参考,这是我的HTML:

<ul id = "nav">
    <li>Accueil</li>
    <li>Recherche</li>
    <li>Contact</li>
</ul>

And here is my CSS:

这是我的CSS:

#nav {
    width: 100%;
    text-align: justify;
    margin: 0 0 3em 0;
    padding: 8px;
    list-style: none;
    border-bottom: 1px solid #ccc; 
    border-top: 1px solid #ccc;
}

#nav:after {
    content: '';
    display: inline-block;
    width: 100%;
}

#nav li {
    width: 15%;
    display: inline-block;
    padding: 4px 15px;
    text-align: center;
    text-decoration: none;
    background-color: #f2f2f2;
    border: 1px solid #ccc;
    border-radius: 
}

Is there a way to do this without specifying fixed margins or artificially "squeezing" the contents of the region? Any help would be most appreciated indeed. Many thanks in advance!

有没有办法在没有指定固定边距或人为地“挤压”该地区的内容的情况下这样做?确实会有任何帮助。提前谢谢了!

UPDATE

Actually I do have a limit to 800px maximum in width. So there's no way to do this fluidly? I tried JavaScript to calculate what the spaces to the left and the right should be, but the points begin to spill over to the next line if I go above 5%.

实际上我的宽度限制为最大800px。所以没有办法流畅地这样做?我尝试使用JavaScript来计算左边和右边的空格,但如果我超过5%,则点会开始溢出到下一行。

I think I might be missing something on precisely how the "before" and "after" aspects behave when a list is horizontalized. At this point would I be better off using a set of divs than bullet points? (If the list ever becomes dynamic that makes the page less proper, but for a simple project I doubt that will be a problem.)

我认为,当列表横向化时,我可能会错过“前”和“后”方面的行为。在这一点上,我会更好地使用一组div而不是子弹点? (如果列表变得动态,使页面不太合适,但对于一个简单的项目,我怀疑这将是一个问题。)

Thanks again!

UPDATE BIS

Found a great solution. Here it is:

找到了很好的解决方案这里是:

#nav {
    display: flex;
    justify-content: space-around;
    text-align: justify;
    width: 100%;
    margin: 0;
    padding: 8px 0px;
    list-style: none;
    border-bottom: 1px solid #ccc; 
    border-top: 1px solid #ccc;
}

.navItem {
    position:relative;
    width: 15%;
    display: inline-block;
    padding: 4px 15px;
    text-align: center;
    text-decoration: none;
    border: 1px solid #ccc;
    border-radius: 3px;
}
.navSpan { 
    position:absolute; 
    width:100%;
    height:100%;
    top:0;
    left: 0;
    display: block;
}

1 个解决方案

#1

try this code

试试这段代码

#nav {
width: 100%;
text-align: justify;
margin: 0 0 3em 0;
padding: 8px;
list-style: none;
border-bottom: 1px solid #ccc; 
border-top: 1px solid #ccc;
}

#nav:after {
content: '';
display: inline-block;
width: 100%;
}

#nav li {
width: 10%;
display: inline-block;
padding: 4px 2%;
text-align: center;
text-decoration: none;
background-color: #f2f2f2;
border: 1px solid #ccc;
margin-right:12%;
}
#nav:before  {
width: 15%;
display: inline-block;
padding: 4px 15px;
text-align: center;
text-decoration: none;
content:''
}

you'll need to lower the margin-right on narrow screens (under 780px), because the % number becomes inexact at certain point but it should be enough to have you started. See fiddle here

你需要在窄屏幕上(低于780px)降低边距 - 因为%数在某个时刻变得不精确,但它应该足以让你开始。在这里看小提琴

#1