此 div 高度始终小于父 div

Question

所以我在这里查看一些答案时尝试了很多尝试，但我似乎无法在父 div 中完全对齐文本并使白色分隔符成为父 div 的全长。

https://jsfiddle.net/oxgg6qrf/

代码如下：

<div id="ambMenu">
    <ul id="ulMenu">
        <li id="liMenuBar1"><div class="ambMenuDivider"></div></li>
        <li id="liMenuOption1">Test1</li>
        <li id="liMenuBar2"><div class="ambMenuDivider"></div></li>
        <li id="liMenuOption2">Test2</li>
        <li id="liMenuBar3"><div class="ambMenuDivider"></div></li>
        <li id="liMenuOption3">Test3</li>
        <li id="liMenuBar4"><div class="ambMenuDivider"></div></li>
    </ul>
</div>

#ambMenu { width: 360px; height: 25px; background-color: #333; color: #f2f2f2; }
#ulMenu { list-style-type: none; margin: 0; padding: 0; display: inline-block; }
#liMenuBar1 { padding-left: 30px; float: left; display: inline-block; margin: 0; }
#liMenuBar2, #liMenuBar3, #liMenuBar4 { float: left; display: inline-block; margin: 0; padding-left: 10px; padding-right: 5px; }
#liMenuOption1, #liMenuOption2, #liMenuOption3 { float: left; display: inline-block; margin: 0; vertical-align: middle; }
.ambMenuDivider { border-left:5px solid #f2f2f2; display: inline; padding-left: 5px; padding-right: 5px;}

我知道有很多 id，但我以后需要它们来编写 js 脚本。

有没有更好的方法来创建具有此方面的此类菜单？或者我错过了什么？

Answer 1

您的主容器的指定高度为 25 像素：

#ambMenu { 
    width: 360px; 
    height: 25px; /* height of container */
    background-color: #333; 
    color: #f2f2f2;
}

但是您的子容器没有指定高度。所以，第一步，给子容器和父容器一样的高度：

#ulMenu {
    list-style-type: none; 
    margin: 0; 
    padding: 0;
    height: 25px; /* new */
}

为了to vertically center the text apply a line-height到列表项等于容器的高度：

#liMenuBar1 { 
    padding-left: 30px; 
    float: left; 
    display: block; 
    margin: 0;
    line-height: 25px; /* new */
}

#liMenuBar2, #liMenuBar3, #liMenuBar4 { 
    float: left; 
    display: block; 
    margin: 0; 
    padding-left: 10px; 
    padding-right: 5px;
    line-height: 25px; /* new */
}

#liMenuOption1, #liMenuOption2, #liMenuOption3 {
    float: left; 
    display: block; 
    margin: 0; 
    vertical-align: middle;
    line-height: 25px; /* new */
}

.ambMenuDivider { 
    border-left:5px solid #f2f2f2; 
    display: inline; 
    padding-left: 5px; 
    padding-right: 5px;
    line-height: 25px; /* new */
}

现在文本在容器中垂直居中。

要让菜单分隔线拉伸整个高度，您需要进行两项调整：

1. 申请height: 25px

2. 将display: inline 更改为display: inline-block ^*

   .ambMenuDivider { 
       border-left:5px solid #f2f2f2; 
       display: inline-block; /* adjusted */
       padding-left: 5px; 
       padding-right: 5px;
       line-height: 25px; /* new */
       height: 25px; /* new */
   }
   

演示：https://jsfiddle.net/oxgg6qrf/2/

^*You cannot apply height to inline elements..

Answer 2

这是工作的demo

主要变化是在删除一些 css 类后添加了height: 25px;。

它可以更好，但它是你现在想要的。 我删除了不需要的类。

Answer 3

这是解决问题的另一种方法。请替换以下 ID。

#ulMenu {
        list-style-type: none;
        margin: 0;
        padding: 0;
        margin-left: 14px;
    }

#ulMenu {
    list-style-type: none;
    margin: 0;
    padding: 0;
    margin-left: 14px;
}

Answer 4

作为替代方案，您可以在每个菜单项上使用右侧边框，并在第一项上使用左侧边框。

那么你不需要单独的 div 元素作为菜单分隔符。这简化了一切。

HTML：

<div id="ambMenu">
    <ul id="ulMenu">
        <li id="liMenuOption1">Test1</li>
        <li id="liMenuOption2">Test2</li>
        <li id="liMenuOption3">Test3</li>
    </ul>
</div>

CSS：

#ambMenu {
    width:360px;
    height:25px;
    background-color:#333;
    color:#f2f2f2;
}

#ulMenu {
    list-style-type:none;
    margin:0;
    padding:0;
}

#ulMenu li {
    float: left;
    display: block;
    vertical-align: middle;
    line-height: 25px;  /* Height of list items */
    padding: 0px 10px;  /* Space around items (0px vertical, 10px horizontal) */
    border-right: 5px solid #f2f2f2;  /* Vertical separators after each item */
}

/* Special rules for the first list item. */

#ulMenu li:first-child {
    margin-left: 30px;  /* Add space to the left */
    border-left: 5px solid #f2f2f2;  /* Vertical separator before first item */
}