使所有垂直分隔符高度相同答案

【问题标题】：Make all the vertical separators in the same height使所有垂直分隔符高度相同
【发布时间】：2015-11-03 16:51:00
【问题描述】：

我有一个 Bootstrap 导航栏，其中的链接很少，并且它们之间有垂直分隔符。问题是当屏幕宽度在 ~1100px - ~770px 之间时，分隔符的高度不同。这是他们的css代码：

 .navbar-default li + li {
    background:url('../images/buffer1.png') no-repeat top right;
    background-size: auto 90%;

}

我猜是因为使用了百分比，但由于响应式设计，我必须使用它（当屏幕变小时，li's 的宽度会发生变化，分隔符必须适合它们的高度...

这是一个活生生的例子：

http://www.bootply.com/KuD2TuYe0H

我正在寻找一种解决方案（仅 CSS 更好），使所有分隔符具有相同的高度。

【问题讨论】：

标签： css twitter-bootstrap html-lists navbar

【解决方案1】：

一种解决方案是使用底部边距/填充来放屁。适用于 IE7+。

.navbar .nav {
    overflow: hidden;
    margin: 0;
    width: 100%;
    direction: rtl;
}

.navbar .nav > li {
    float: right;
    display: inline-block;
    width: auto;
    text-align: center;
    padding-bottom: 10000px;
    margin-bottom: -10000px;
    direction: rtl;
    width: calc(100% / 7.0);
    font-family: Tahoma, Verdana, Segoe, sans-serif;
    font-size: 14px;
    font-weight: bold;
    /* border-left: 1px solid #d4d4d4; */
}

.nav > li {
    padding-bottom: 10000px;
    margin-bottom: -10000px;
}

.navbar-default .navbar-nav>li>a {
    color: #777;
    background-color: #f8f8f8;
}

【讨论】：

HTML 在示例中