Question

好的，我看过很多类似的问题，但没有一个问题完全相关。我并没有对逻辑感到困惑，但是对象的实际渲染宽度返回的幅度明显大于屏幕上的宽度。

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

这是我的代码：

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

我尝试将下拉列表的右边距，边距左边设置为自动，并将宽度设置为父级的百分比，以中心方式无效。我的问题是容器的宽度返回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>

Answer 1

尝试以下代码。我没有测试它但它应该工作：

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

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

1 个答案: