Question

好的，情况就是这样......

假设我有一个网站导航栏，我允许用户在此导航栏上更改他们想要的链接数量。这意味着他们可能有3,5,10等等。

我想要做的是，如果一个链接启动，它只占用导航栏上1/5的空间。如果我没有使用边框，我可能会做类似的事情：

宽度：18％; 填充：0 1％;

但是，我有两个问题：

1）对于4个按钮，它没有填满整行。如果链接太宽，它看起来很难看......但是当我有6个或7个按钮时，它会有巨大的溢出！ 2）由于我有边框，我不能使用百分比值作为边框或宽度，因为我无法正确估计它的百分比。

现在，我知道我不必使用百分比值，但我理想的是第一个按钮是所有其他按钮正确配合所需的最小尺寸，这意味着如果我有950px并且6个链接，第一个链接可以是大约150px而其他链接是160px ......这很好。我希望导航栏上的所有其他按钮大小相同，无论有多少链接。

我还需要它接受边框...我想这样做的方法是在嵌套div中放置一个边框，这样它不会影响按钮的整体宽度？这一切都很好，但我仍然受到无法使用我想要的样式设计动态网站的问题的困扰，如果我无法使所有导航按钮适当地适应宽度。

我可以使用一些js技巧吗？我甚至都不知道......

由于

修改：这是我的demo fiddle

Answer 1

纯CSS解决方案，基于链接的合理性，但仍作为语义列表项：

请参阅demo fiddle。

在IE7，IE8，IE9，Chrome 12，SafariWin 5，Opera 11，FF 4中测试W7。

<强>更新

关于宽度：由于您将导航链接动态注入HTML页面，因此也可以对导航栏样式进行分类。

请参阅updated fiddle。

Answer 2

这是jQuery的解决方案

http://jsfiddle.net/pxfunc/kKJcr/

根据菜单项数量和导航ul

的宽度动态调整菜单大小

var $nav = $('#nav');

var formatNav = function() {
    var menuItemCount = $nav.children().length,
        // base width
        menuItemWidth = $nav.children().width(), 
        // border + padding + margin + base width of the menu item
        menuItemOuterWidth = $nav.children().outerWidth(true), 
        // border + padding + margin only for the menuItem
        menuItemDiff = menuItemOuterWidth - menuItemWidth, 
        // menu item container width (the <ul>)
        navWidth = $nav.width();
    $nav.children().width(Math.round(navWidth / menuItemCount) - menuItemDiff);
};

Answer 3

我在之前的工作中做过类似的事情，但确实需要JS和CSS的混合。

使用JS进行此操作的一种方法 - 您需要简单地获取导航栏的总宽度（当然，减去填充，边框等）并划分显示的按钮数 - 然后将其转储为css宽度：宽度/ numbOfbuttons％;在每个按钮上。

小心不要完全击中100％因为这可能导致包裹。

然而 - 理想情况下（以及我们这样做的方式）如果你有一个已知数量的潜在按钮或组合，这就容易多了。

然后，解决方案是设置一系列针对每个场景设计的css类：

.oneButt a{width:widthThatLooksNotStupid%;}
.twoButt a{width:49%;}
/* etc */

然后让JS评估并在父级上设置专门设计的类。是的..这需要更多的CSS写作，需要你没有无限的潜力......

.ninehundredsevetyfiveButt a {width:FFFF;}
.ninehundredsevetysixButt a {width:UUUUU;}

...右。但是 - 你可以设置一个真正适合各种场景的漂亮造型。

更新来自我的评论。使用一般的呃...类......的情况，并通过JS应用这些：

.notEnoughToFillSpaceCruizer {width:wide;}
.enoughToFillSpaceCruizer {width:notAsWide;}
.jekPorkins {color:fuschia; font-size:99em; content:"You've got a problem...";  /* the user has failed, administer punishment*/}

Answer 4

也许你应该质疑你试图将动态数量的按钮装到单行上的设计。我认为最好的设计是下拉导航器（如窗口菜单）。这样，无论用户添加了多少导航选项，设计仍然可用。

如果你只是必须有一个没有下拉的导航栏，简短的回答是使用＆lt; table＆gt;如果您需要支持旧浏览器。至少一张桌子不会换行，但在某些时候，如果它被压得太多，你的网站设计看起来会很糟糕。

我确信可以找到CSS3答案，但我不知道。

如何均匀地获得任意数量的空间链接？

4 个答案: