CSS/Bootstrap/HTML - 具有底部邊框和填充的Div ...如何防止邊距或填充的邊框擴展？

我有一個底部邊框的div，無論我嘗試向左還是向右填充邊框都被擴展爲包含底部填充。CSS/Bootstrap/HTML - 具有底部邊框和填充的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>

來源

2016-08-22 Vahe

您的問題不清楚，您提供的CSS似乎不適用於您提供的HTML（並且格式不正確）。 – APAD1

我會做出必要的修改，謝謝您的反饋。 – Vahe

我已解決該問題，並會在下面發表我的評論。 – Vahe

那麼，中印邊界問題是由於我的應用邊界每個錨標籤的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不是容器。

來源

2016-08-22 19:36:43 Vahe

CSS/Bootstrap/HTML - 具有底部邊框和填充的Div ...如何防止邊距或填充的邊框擴展？

回答

相關問題