如何获取任意数量的链接到空间均匀？ [英] How do I get any number of links to space evenly?
问题描述
好的，这里是情况...
Alright, so here is the situation...
说我有一个网站的导航栏，我允许用户更改他们想要的链接数这个navbar。这意味着他们可以有3,5,10等。
Say I have a navbar for a site, and I allow users to change the number of links they want on this navbar. This means they could have 3, 5, 10, etc.
我想做的是让它，如果一个链接，它只需要占用，说，导航栏上空格的1/5。如果我没有使用边框，我可以这样做：
What I want to do is make it so that if one link is up, it only takes up, say, 1/5th of the space on the navbar. If I weren't using borders, I might do something like:
width：18％;
padding：0 1％;
width: 18%; padding: 0 1%;
但是，这有两个问题：
1 ）对于4个按钮，很好，它不填满整行。它会看起来丑陋，如果链接太宽...但是当我有6或7个按钮，它有巨大的溢出！
2）由于我有边框，我不能对边框或宽度使用百分比值，因为我无法正确估计它的百分比。
1) For 4 buttons, that's fine that it doesn't fill up the whole row. It would look ugly if the links were too wide... but when I have 6 or 7 buttons, it's got huge overflow! 2) Since I have borders, I can't use a percentage value for the borders or the widths, because I can't properly estimate how much of the percentage it will be.
现在，我知道我不必使用百分比值，但我最喜欢的是第一个按钮是所有其他按钮正确适合所需的最小可能的大小，这意味着如果我有950px和6个链接，第一个链接可以是约150px，而其他的是160px ...这很好。我想要导航栏上的所有其他按钮大小相同，不管有多少个链接。
Now, I know I don't have to use percentage values, but what I would ideally prefer is that the first button is the smallest possible size necessary for all the other buttons to fit properly, meaning that if I have 950px and 6 links, the first link can be about 150px while the others are 160px... that's fine. I want all the other buttons on the navbar to be equally sized, regardless of how many links there are.
我还需要它来接受边框...图的方式做到这一点是把一个边框在嵌套的div，这样，它不影响按钮的整体宽度？这一切都很好，但我仍然困扰的问题，如果我无法得到所有的导航按钮适当的宽度，不能设计一个动态网站使用我想要的样式。
I also need for it to accept a border... I figure the way to do this is to put a border in the nested div, so that way it doesn't effect the overall width of the button? This is all well and good, but I'm still plagued by the issue of not being able to design a dynamic site using the style I want if I can't get all the nav buttons to fit the width properly.
有没有一些js技巧我可以使用？我甚至不知道...
Are there some js tricks I could use? I don't even know...
感谢
编辑：是我的演示小提琴
推荐答案
纯CSS解决方案基于链接的理由，虽然仍然作为语义列表项：
A pure CSS solution, based on justification of the links, though still as semantic list items:
请参阅 demo fiddle 。
在IE7，IE8，IE9，Chrome 12，SafariWin 5的W7测试，Opera 11，FF 4。
Tested on W7 in IE7, IE8, IE9, Chrome 12, SafariWin 5, Opera 11, FF 4.
更新：
由于您将导航链接动态插入到HTML页面中，因此也有可能对导航栏样式进行分类。
Concerning the width: Since you dynamically inject the navigation links into the HTML page, it likely is also possible to classify the navigation bar style.
这篇关于如何获取任意数量的链接到空间均匀？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
