html - CSS/Bootstrap/HTML - 带有底部边框和填充的 Div...如何防止在边距或填充上扩展边框？

Question

我有一个带有底部边框的 div，无论我尝试向左填充还是向右填充，边框都会扩展以包含底部填充。

如何将边框限制为边框的最大长度，不包括填充或边距(左、右)？

CSS

div.row.banner div.links
     display: inline-block
     height: 40px
     margin: 0px
     border-bottom: 2px solid #5cdde0

div.row.banner div
     display: inline-block
     height: 25px

HTML

<div class="col-sm-4 nopadding pull-right">
    <div class="links pull-right">
        <div class="active pull-left"><a href="">Test Link 1</a></div>
        <div class="active pull-left margin-left"><a href="">Test Link 2</a></div>
        <div class="active pull-left margin-left"><a href="">Text Link 3</a></div>
    </div>
</div>

Answer 1

嗯，边框问题是由于我将边框应用于每个 anchor 标记 div 的封闭 div。

我修改了下面的原文

div.row.banner div.links
     display: inline-block
     height: 40px
     margin: 0px
     border-bottom: 2px solid #5cdde0

以下内容

div.row.banner div.links
     display: inline-block
     height: 40px
     margin: 0px

div.links div.active
     border-bottom: 2px solid #5cdde0

从而使边框仅适用于内部 div 而不是容器。