Question

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

https://jsfiddle.net/oxgg6qrf/＆lt; - 这是我的尝试，但我不确定是什么迫使分隔符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 */
}

按顺序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 */
}

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

此div高度始终小于父div

4 个答案: