0

我正在尝试调整div单击菜单按钮时使用 JavaScript 居中的 a 的宽度，但是当我这样做时，宽度更改正常，但它也将元素设置为向下约 20px。这在上面造成了一个很大的空白contentSectionLeftSide。

这是我所拥有的：

 function setButtonH(e){

    var item = e;
    var items = ["menu_item1","menu_item2","menu_item3","menu_item4"];

    if(e==items[1])
    {
        document.getElementById("contentSectionLeftSide").style.width="600px";
        document.getElementById("contentSectionRightSide").style.width="300px";
        document.getElementById("contentSectionLeftSide").style.height="500px";
        document.getElementById("contentSectionRightSide").style.height="500px";
    }
    else {
        document.getElementById("contentSectionLeftSide").style.width="45%";
        document.getElementById("contentSectionRightSide").style.width="45%";
        document.getElementById("contentSectionLeftSide").style.height="500px";
        document.getElementById("contentSectionRightSide").style.height="500px";
     }
  }

HTML

 <nav id="menu_item">


        <div id="menu_item1" onclick="setButtonH('menu_item1'), menuGo(1)">

                Home

        </div>


        <div id="menu_item2" onclick="setButtonH('menu_item2'), menuGo(2)">

                Interests

        </div>

        <div id="menu_item3" onclick="setButtonH('menu_item3'), menuGo(3)">

                Creations

        </div>


        <div id="menu_item4" onclick="setButtonH('menu_item4'), menuGo(4)">

                Bio

        </div>

    </nav>



 #contentSectionLeftSide{

    padding:10px;
margin-bottom:4px;
background:#EFEFEF;
-webkit-border-radius:5px;  
display:inline-block;
 }
 #contentSectionRightSide{
padding:10px;
margin-bottom:4px;
background:#EFEFEF;
-webkit-border-radius:5px;  
display:inline-block;
}
4

1 回答 1

0

我想我现在已经掌握了这种情况，并且在本地重新创建您的代码我确实注意到左侧内容部分上方有一个小间隙。

问题是因为你div的 s 的内容（可能）导致不同div的高度，display: inline-blockCSS 声明导致它们在底部基线处垂直对齐，所以你需要做的就是告诉 CSS 垂直对齐它们到顶部。

我在您提供的 HTML 下方构建了这样的左侧和右侧内容区域：

<nav id="menu_item">
    <div id="menu_item1" onclick="setButtonH('menu_item1')">Home</div>
    <div id="menu_item2" onclick="setButtonH('menu_item2')">Interests</div>
    <div id="menu_item3" onclick="setButtonH('menu_item3')">Creations</div>
    <div id="menu_item4" onclick="setButtonH('menu_item4')">Bio</div>
</nav>

<div id="contentSectionLeftSide">Left side content!</div>
<div id="contentSectionRightSide">
    Right side content!<br />
    There's a little more content in here!
</div>

我还menuGo(#)从 's 中删除了该功能onClick，因为我不知道该功能去了哪里。旁注：在这里要小心，因为在上面的代码中它读取（例如）：

onclick="setButtonH('menu_item2'), menuGo(2)"

它应该在哪里：

onclick="setButtonH('menu_item2'); menuGo(2)"

这可能会产生问题。

但是，回到解决方案，您需要做的就是在vertical-align: top;每个内容区域的样式声明中添加一行，它们将有效地与顶部对齐：

#contentSectionLeftSide {
    padding:10px;
    margin-bottom:4px;
    background:#EFEFEF;
    -webkit-border-radius:5px;  
    display:inline-block;
    vertical-align: top; /* extra CSS... */
}

#contentSectionRightSide {
    padding:10px;
    margin-bottom:4px;
    background:#EFEFEF;
    -webkit-border-radius:5px;  
    display:inline-block;
    vertical-align: top; /* extra CSS... */
}

这是一个工作小提琴，供您查看它的实际应用。希望这会有所帮助，祝你好运并继续编码！:)

于 2013-10-14T19:56:46.923 回答