减少底部边框宽度

Question

我有两个选项卡，它们都有底边框。这是 jsfiddle 示例。

<div class="component-content">
    <div class="tabs-inner">
        <ul class="tabs-heading">
            <li tabindex="0" class="active">
                <div>
                    <div class="row">
                        <div class="component content col-12">
                            <div class="component-content">
                                <div class="field-heading">TAB 1: STANDARD SMALL</div>
                            </div>
                        </div>
                    </div>
                </div>
            </li>
            <li tabindex="-1">
                <div>
                    <div class="row">
                        <div class="component content col-12">
                            <div class="component-content">
                                <div class="field-heading">TAB 2: STANDARD SMALL</div>
                            </div>
                        </div>
                    </div>
                </div>
            </li>
        </ul>
    </div>
</div>

.tabs-heading {
    display: table;
    table-layout: fixed;   
    width:100%;
}
.tabs-heading li {
    display: table-cell;
    border-bottom: 2px solid red;
}

我想在边框底部添加填充，使其看起来像这样

我尝试添加 padding-bottom 但没有成功。

如有任何建议或帮助，我们将不胜感激

Answer 1

我不太确定我是否答对了你的问题......但也许你正在寻找这样的东西......？

如果您不使用 table 和 table-cell ...而是使用 flexbox ...所有选项卡将自动获得相同的高度，您可以使用padding-bottom。如果您愿意，也可以在选项卡之间添加 margins。

#wrapper {
    display: flex;
    align-items: stretch;
    background-color: Gray;
}

#wrapper div {
    padding-bottom: 10px;
    border-bottom: 2px solid orange;
}

#one {
    background-color: green
}

#two {
    background-color: blue
}

#three {
    background-color: red

<div id="wrapper">
    <div id="one">one one one one one one one one one one one one one one one one one one one one one</div>
    <div id="two">two two two two two two</div>
    <div id="three">three</div>
</div>

减少底部边框宽度

Reduce the bottom border width

css

border

sass

padding