jquery - CSS/jQuery-调整嵌套容器的宽度

好的，我已经看到了许多类似的问题，但是没有一个是完全相关的。我对逻辑不感到困惑，但是返回的对象的实际呈现宽度明显大于其在屏幕上的宽度。

我有一个带嵌套ul标签的div，用于下拉列表（基于CSS）。我正在尝试通过将下拉菜单的宽度差异的一半应用到下拉列表中，并将其父div作为左填充CSS属性。

这是我的代码：

    function resizeNavBar() {
        $("#dropdown").css('padding-left', ((($("#dropdowncontainer").width() - $("#dropdown").width()) / 2) + 'px'));
    }

我尝试将下拉菜单的margin-right，margin-left设置为auto，并将宽度设置为父级的百分比，以这种方式居中，但无济于事。我的问题是容器的宽度返回1186，而ul则返回1146，这可能更像是900 ish。我从未在任何地方设置下拉菜单的宽度。有什么想法为什么要返回这样的折扣号码？

另外，除非我设置下拉列表的宽度，否则根本不会设置padding-left，但是我正在尝试使其具有动态性，那么为什么要这样做呢？这就是我要解决的问题。

CSS：

#dropdowncontainer
{
clear:both;
height: 28px;
}

#dropdown /* Remove bullets and initialize styling */
{
list-style:none;
margin-left: auto;
margin-right: auto;
}

#dropdown li /* All tabs */
{
float:left;
padding-right:0px;
position:relative;
}

#dropdown a /* Tabs with links */
{
display:block;
padding:5px;
color:#FFFFFF; /* Black */
background-color: #D5252B;
text-decoration:none;
}

#dropdown span /* Tabs with links */
{
display:block;
padding:3px;
color:#FFFFFF; /* Black */
background-color: #D5252B;
text-decoration:none;
}

#dropdown ul /* Drop down tabs */
{
background:rgba(255,255,255,0); /* set the background to transparent */
list-style:none;
position:absolute;
left:-11337px; /* Pushes content of dropdown lists off screen until... */
}

#dropdown ul li /* Drop down tabs */
{
padding-top:0px;
float:none;
white-space:nowrap;
}

#dropdown li:hover ul /* Collective set of drop down tabs */
{
left:0; /* ... the user hovers on the link so we pull the content back */
}

HTML：

    <div style="width:100%;float: left; height: 40px;">
      <div id="dropdowncontainer">
        <ul id="dropdown">
        <li>Title1<ul>
            <li>item1</li>
            <li>item2</li>
        </ul></li>
            <li>Title2<ul>
            <li>item3</li>
            <li>item4</li>
        </ul></li>
        </ul>
      </div>
    </div>

最佳答案

请尝试以下代码。我还没有测试过，但它应该可以工作：

function resizeNavBar() {
    $("#dropdown").css('padding-left', function () {
        return Math.floor($("#dropdowncontainer").width() - $("#dropdown").width()) / 2) + 'px';
    });
}