html - 分段控制元素的背景色未跨越整个宽度

Question

我正在研究具有 3 个不同“类别”的分段控件。当某个类别“活跃”时，我希望他们的背景完全是蓝色的。 “tab1”就是这种情况，但不幸的是，当“tab2”或“tab3”处于事件状态时出现问题，因为它们的背景不是完全蓝色的。背景还包含小的灰色 strip ，我不知道如何去除它们。

我将此代码放在此处的 jsfiddle 中:http://jsfiddle.net/vooj53xt/1/jsfiddle 包含三次完全相同的组件。这三个组件之间的唯一区别是哪个元素被激活。如您所见，当“tab2”或“tab3”被激活时，它们的背景并不完全是蓝色的。还有一条灰色的小条。然而，这些灰色 strip 是不需要的。谁能告诉我如何解决这个问题？

HTML 看起来像这样:

        <div class="container">
            <div class="row">
                <div class="col-xs-12 col-sm-6 col-sm-offset-3 col-lg-4 col-lg-offset-4" style="padding-bottom:20px;">
                    <ul class="segmented-control">
                        <li class="active"><a href="#tab1">Tab 1</a></li>
                        <li class=""><a  href="#tab2">Tab 2</a></li>
                        <li class=""><a href="#tab3" >Tab 3</a></li>
                    </ul>
                </div>
            </div>

附带的 CSS 如下所示:

body {
background-color: #f8f4f0;
padding-bottom: 70px;
padding-top: 70px;  
}

.segmented-control {
    border: 2px solid #51cbeb;
    border-radius: 5px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.segmented-control li {
    border-right: 2px solid #51cbeb;
    display: inline-block;
    padding: 0;
    text-align: center;
    width: 32%;
}

.segmented-control li:last-child {
    border-right: none;
}

.segmented-control .active {
    background-color: #51cbeb;
}    

.segmented-control li a {
    display: block;
    font-weight: bold;
    text-transform: uppercase;
    padding: 5px 0;
}

.demo-page {
    margin: 120px 0;
}

Answer 1

您可以更改显示属性，如下所示:

.segmented-control {
 display:table;
}
.segmented-control li {
display:table-cell;
}

演示:http://jsfiddle.net/vooj53xt/9/
问题是由使用内联 block 引起的... https://css-tricks.com/fighting-the-space-between-inline-block-elements/