jQuery <li>的和宽度问题</li>

Question

我正在尝试创建一个看起来像的子菜单：

HTML：

<ul class="mainMenu clearfix">
    <li><a href="#">Eurodan huset</a></li>
    <li><a href="#">Hustyper</a></li>
    <li><a href="#">Galleri</a></li>
    <li><a href="#">10 byggesten</a></li>
    <li><a href="#">Huse til salg</a></li>
    <li><a href="#">Udstillinger</a>
        <ul class="underMenu">
            <li><a href="#">Salgskontorer</a></li>
            <li><a href="#">Velkommen</a></li>
            <li><a href="#">Historie</a></li>
            <li><a href="#">Fremtidens boliger</a></li>
        </ul>
    </li>
    <li><a href="#">Grunde</a></li>
    <li><a href="#">Om os</a></li>
    <li><a href="#">Katalog</a></li>
</ul>

其中.mainMenu是大菜单，.underMenu是主菜单中包含“underpages”的列表。要使下面的菜单工作，我需要一个固定的宽度（它有绝对位置，<li>父有position:relative所以我使用jquery。

的jQuery / JavaScript的：

$('.underMenu').each(function() {
    var t = $(this),
        tW = 0;

    $('li', t).each(function() {
        tW += $(this).outerWidth(true);
    });

    t.css('width', tW);

});

按照上面的代码，我的下菜单应该看起来不错（我想的方式），但问题是它看起来像这样：

要使其正常工作，我需要在.underMenu的宽度上添加40px，但由于我使用$(this).outerWidth(true);，我无法理解问题所在。

根据我的想法，一切都应该正常，但正如你所看到的，它没有。

CSS：

.mainMenu,
.underMenu {
    clear:both;
    line-height:29px;
    background:url(../images/transPxBlack.png) repeat left top;
    -moz-border-radius:16px;
    -webkit-border-radius: 16px;
    border-radius:16px;
    padding:0 20px;
}
.mainMenu > li {
    margin-left:16px;
    position:relative;
    font-size:13px;
}
.mainMenu > li:first-child {margin-left:0;}

.underMenu {position:absolute;}
.underMenu li {
    font-size:11px;
    margin-left:18px;
}
.underMenu li:first-child {margin-left:0;}

Answer 1

您的宽度计算是以子li标签的宽度总和计算的，但它不考虑.underMenu上的填充，因此您的总宽度会缩短。如果你添加填充，它可以工作：

$('.underMenu').each(function(){
    var t = $(this),
        tW = 0;

    $('li', t).each(function(){
        tW += $(this).outerWidth(true);
    });

    t.css('width', tW + t.outerWidth(true) - t.width());
});

您可以在此处查看：http://jsfiddle.net/jfriend00/CTuz3/

Answer 2

您的计算工作正常。将display:inline-block和float:left添加到您将按预期看到的.underMenu li规则。

            .underMenu li {
                font-size:11px;
                margin-left:18px;
                display:inline-block;
                float:left;
            }

正在使用 demo