该div高度始终小于父div

Question

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

https://jsfiddle.net/oxgg6qrf/ <-这是我的尝试，但是我不确定是什么迫使分隔符div变小。

代码如下：

<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

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

#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 */
}

为了使文本垂直居中，请将line-height应用于等于容器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/

^* 您不能将height应用于内联元素。 。

Answer 2

这是工作演示

主要变化是增加height: 25px; 删除一些CSS类后。

可能会更好，但是现在您想要什么。 我删除了不需要的类。

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 */
}