Question

我正在开发一个具有3个不同＆＃34;类别＆＃34;的分段控件。当某个类别是“活跃的”时，我希望他们的背景完全是蓝色的。这是＆＃34; tab1＆＃34;的情况。但不幸的是，当＆＃34; tab2＆＃34;或＆＃34; tab3＆＃34;是活跃的，因为他们的背景并非完全是蓝色的。背景也包含小灰色条带，我不知道如何摆脱它们。

我将此代码放在jsfiddle中：http://jsfiddle.net/vooj53xt/1/ jsfiddle包含三次相同的精确组件。三个组件之间的唯一区别是哪个元素被激活。正如你所看到的，当＆＃34; tab2＆＃34;或＆＃34; tab3＆＃34;被激活后，他们的背景并非完全是蓝色的。还有一个灰色的小条带。然而，这些灰色条带是不希望的。有谁能告诉我如何解决这个问题？

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

您可以将font-size: 0;设置为ul并在li上重置，以修复内嵌块中的空白错误。

.segmented-control {
  font-size: 0;
}

.segmented-control li {
  font-size: 16px;
}

Answer 2

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

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

DEMO：http://jsfiddle.net/vooj53xt/9/
问题是由使用内联块... https://css-tricks.com/fighting-the-space-between-inline-block-elements/

引起的

Answer 3

这是一个fiddle。我刚刚将display:block更改为float:left - 并将clearfix类添加到ul标记类，并将li标记的宽度更改为33.34％。

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 clearfix">
                <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 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 clearfix">
                <li class=""><a href="#tab1">Tab 1</a>
                </li>
                <li class="active"><a href="#tab2">Tab 2</a>
                </li>
                <li class=""><a href="#tab3">Tab 3</a>
                </li>
            </ul>
        </div>
        <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 clearfix">
                <li class=""><a href="#tab1">Tab 1</a>
                </li>
                <li class=""><a href="#tab2">Tab 2</a>
                </li>
                <li class="active"><a ref="#tab3">Tab 3</a>
                </li>
            </ul>
        </div>
    </div>
</div>

CSS：

body {
    background-color: #f8f4f0;
    padding-bottom: 70px;
    padding-top: 70px;
}
/* Segmented control */
 .segmented-control {
    border: 2px solid #51cbeb;
    border-radius: 5px;
    list-style: none;
    padding: 0;
    margin: 0;
}
.segmented-control li {
    border-right: 2px solid #51cbeb;
    float:left;
    padding: 0;
    text-align: center;
    width: 33.3333334%;
}
.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;
}

分段控制元件的背景颜色不跨越整个宽度

3 个答案: