display: inline-block 在 li 的底部创建 bar答案

【问题标题】：display: inline-block creates bar on the bottom of the lidisplay: inline-block 在 li 的底部创建 bar
【发布时间】：2014-07-17 02:40:05
【问题描述】：

我正在开发一个网站来显示公司的服务，问题是当我在网站的其他部分编码时，突然在我的第二个菜单上出现了一个栏，用于选择类别，这太疯狂了

这里是页面link

<div class="menu2">
<div class="aux_960">
    <ul>
        <li><a href="#">saf</a></li>
        <li><a href="#">saf</a></li>
        <li><a href="#">saf</a></li>
    </ul>
</div>

它就在 li 的伪元素 :after 的底部，在我们有三个“saf”链接的第二个菜单上

我试图解决这个问题，但无论如何我所做的似乎都无济于事，唯一删除栏的是将 li 定位设置为 float:left，但感觉不对

在这个小提琴上，图像当然不会显示，但你们应该能够看到栏

谢谢！！

【问题讨论】：

请编辑以添加您正在使用的 CSS，最好尝试在 jsfiddle 上重新创建问题
问题就在那里，我无法重新创建整个页面，因为图像，我不能发布链接，因为它的数字，但问题就在那里，当我只放菜单时，问题是解决了，但我需要它在整页上工作
这里是link
@SlightlyCuban 该链接是一个 jsfiddle 链接。我在这里简化了代码jsfiddle.net/9Xm8k/6

标签： html css text-align

【解决方案1】：

您的问题来自

.menu2 {
    display: block;
    line-height: 50px;
    font-weight: 700;
    text-decoration: underline;
}

删除text-decoration: underline;

此块在您的代码中较低，.menu2 的定义有 2 个，这是在第二个中

工作示例http://jsfiddle.net/9Xm8k/8/

这是您原始代码中的修复http://jsfiddle.net/9Xm8k/9/

【讨论】：

【解决方案2】：

See working jsFiddle demo

.menu
{
    background: #d1d1d1;
    clear: both;
}

【讨论】：

我看不出和原来的页面有什么不同，抱歉
页眉的左侧和右侧分别向左和向右浮动。所以，你需要为它之后的元素清除浮动，这是你的菜单。所以，clear:both 应该可以解决您的问题。