好吧,情况是这样的……
假设我有一个网站的导航栏,并且我允许用户更改他们想要在此导航栏上的链接数量。这意味着他们可以有 3、5、10 等。
我想要做的是,如果有一个链接打开,它只占用导航栏上 1/5 的空间。如果我不使用边框,我可能会这样做:
宽度:18%;
填充:0 1%;
但是,我对此有两个问题:
1) 对于 4 个按钮,只要不填满整行就可以了。如果链接太宽,看起来会很丑……但是当我有 6 或 7 个按钮时,就会出现巨大的溢出!
2)由于我有边框,因此我无法对边框或宽度使用百分比值,因为我无法正确估计它的百分比是多少。
现在,我知道我不必使用百分比值,但我理想情况下更喜欢的是第一个按钮是所有其他按钮正确安装所需的最小尺寸,这意味着如果我有 950px 和 6 个链接,第一个链接大约为 150 像素,而其他链接为 160 像素...这很好。我希望导航栏上的所有其他按钮大小相同,无论有多少链接。
我还需要它接受边框...我认为执行此操作的方法是在嵌套 div 中放置边框,这样就不会影响按钮的整体宽度?这一切都很好,但我仍然受到以下问题的困扰:如果我无法让所有导航按钮正确适应宽度,则无法使用我想要的样式设计动态网站。
我可以使用一些 js 技巧吗?我什至不知道...
Thanks
Edit:这是我的演示小提琴 http://jsfiddle.net/vUng3/3/
一个纯 CSS 解决方案,基于链接的合理性,尽管仍然是语义列表项:
See 演示小提琴 http://jsfiddle.net/NGLN/MppZN/2/.
在 IE7、IE8、IE9、Chrome 12、SafariWin 5、Opera 11、FF 4 中的 W7 上进行了测试。
Update:
关于宽度:由于您将导航链接动态注入到 HTML 页面中,因此也可以对导航栏样式进行分类。
See 更新了小提琴 http://jsfiddle.net/NGLN/MppZN/4/.
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)