这个div高度总是小于parentdiv

Question

所以我在这里查看一些答案时尝试了很多尝试，但我似乎无法在 parent div 中完全对齐文本并制作白色分隔符是 parent 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

您的主容器的指定高度为 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 */
}

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

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

应用height: 25px

将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

这里有另一种解决问题的方法。请替换以下为.

#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 菜单元素 dividers。这简化了一切。

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

这个div高度总是小于parentdiv

This div height is always smaller than the parent div

css

height

html-lists

separator