Question

我有以下代码：

<div class='menu'>
    <div class='menu_1'>
    <a href='../test.php'>JOBS</a>
    </div>
    <div class='menu_2'>
    <a href='../test.php'>EMPLOYERS</a>
    </div>
    <div class='menu_3'>
    <a href='../test.php'>MEMBERS</a>
    </div>
    <div class='menu_4'>
    <a href='../test.php'>CONTRACTORS</a>
    </div>
    <div class='menu_5'>
    <a href=../test.php'>REMINDERS</a>
    </div>
    <div class='menu_6'>
    <a href='../test.php'>REPORTS</a>
    </div>  
    </div>

我还有以下Jquery，它将根据菜单中的项目动态调整链接大小：

$('.menu a').css('width',100/$('.menu > div').size() + '%');

这段代码按我想要的方式工作，但我想知道是否有办法只使用CSS吗？

非常感谢任何帮助。

Answer 1

看起来你正试图以一种看起来不错的方式将所有链接放在一行上。最简单的方法是使用表格，或使用现代浏览器，表格显示类型。试试这个：

.menu { display: table-row; width: 100%; }
.menu > div { display: table-cell; }

您可能需要使用display: table在菜单周围添加额外的div。

这不会完全符合jQuery的功能;带有较大文本的链接将占用更多空间。只要表拉伸算法工作正常，这可以说是更好的行为。

Answer 2

设置.menu显示：inline-block（仅限IE8 +： - /）和a显示：block;

http://jsfiddle.net/6XDwx/

动态更改菜单项的宽度

2 个答案: