父母的身高比他的孩子大

Question

我有一个包含ul标签和span标签的div来创建我的对齐水平导航栏。

第二个跨度是隐藏的跨度，因为我想要第一个跨度的文本是合理的。

所以，我现在遇到的问题是，父母div'的高度大于孩子的身高。

HTML：

<div id="div1">
    <ul id="span1">
        <li>ABC</li>
        <li>DEF</li>
        <li>GHI</li>
        <li>JKL</li>
    </ul>
    <span id="span2"></span>
</div>

CSS：

#div1 {
    background-color: red;
    margin: 0;
    padding: 0;
    text-align: justify;
    height: 15px;
}
#div1 ul#span1 {
    display: inline;
    background-color: blue;
}
#div1 ul#span1 li {
    display: inline-block;
}
#div1 #span2 {
    display: inline-block;
    width: 100%;
    height: 0px;
    background-color: green;
}

JSFIDDLE

有什么建议吗？谢谢！

另一个问题：我想在两个单词之间添加一个单独的圆圈：

我该怎么办？感谢!!!

编辑：对于我的第一个问题，感谢@ Leth0_，我刚刚更改了高度= 15px并且它有效。请给我一些关于我的第二个问题的建议！谢谢！

Answer 1

您可以尝试手动设置高度，尝试添加...

height:20px给父母。

Answer 2

试试这个JSFIDDLE

#div1 {
    background-color: red;
    margin: 0;
    padding: 0;
    text-align: justify;
}
#div1 #span1 {
    display: inline-block;
    width:100%;
    background-color: blue;
}

#div1 #span2 {
    width: 100%;
    height: 0px;
    background-color: green;
}