Question

我有一个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只是更好），使所有分隔符具有相同的高度。

Answer 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;
}

使所有垂直分隔符处于相同高度

1 个答案: