如何設置外部元素的內部邊界？

Question

這裏是我的代碼：

 .compare_header_box{ 
 
      padding: 35px 30px; 
 
      direction: rtl; 
 
     } 
 
     .compare_header_box_title{ 
 
      font-size: 30px; 
 
      width: 100px; 
 
      float: right; 
 
      margin-right: 5px; 
 
      margin-top: 4px; 
 
     } 
 
     .compare_header_box_items{ 
 
      width: 100%; 
 
      border-bottom: 1px solid #ccc; 
 
      direction: ltr; 
 
     } 
 
     .compare_header_box_items a{ 
 
      display: inline-block; 
 
      font-size: 16px; 
 
      padding: 15px 40px; 
 
      
 
     } 
 
     .compare_header_box_items a:hover{ 
 
      text-decoration: none; 
 
      background-color: #f1f1f1; 
 
      color: black; 
 
     } 
 
     .compare_header_box_items .active{ 
 
      border-top: 3px solid orange; 
 
      border-right: 1px solid #ccc; 
 
      border-left: 1px solid #ccc; 
 
      border-bottom: 1px solid white; 
 
     }

 <div class="compare_header_box"> 
 
      <span class="compare_header_box_title active">List</span> 
 
      <div class="compare_header_box_items"> 
 
       <a href="./gp">gp</a> 
 
       <a href="./in">in</a> 
 
       <a href="./tw">tw</a> 
 
       <a class="active" href="./fb">fb</a> 
 
      </div> 
 
     </div>

正如你看到的border-bottom: 1px solid white;似乎並沒有出現。我想將其設置爲border-bottom: 1px solid #ccc;。我怎樣才能做到這一點？

Answer 1

添加margin-bottom: -1px到a標籤.compare_header_box_items DIV

因此代碼將變爲：

.compare_header_box_items a { 
    display: inline-block; 
    font-size: 16px; 
    padding: 15px 40px; 
    margin: 0 0 -1px; /* add this line */ 
} 

你的代碼不能正常工作時，當內部鏈接區域結束主格邊界開始，其中包括他們的邊界過於原因。因此，添加一個1像素的負邊界將使它們兩個邊界重疊。

Answer 2

作爲熱修復，只需添加：margin-bottom: -1px; 檢查以下代碼段。

.compare_header_box{ 
 
      padding: 35px 30px; 
 
      direction: rtl; 
 
     } 
 
     .compare_header_box_title{ 
 
      font-size: 30px; 
 
      width: 100px; 
 
      float: right; 
 
      margin-right: 5px; 
 
      margin-top: 4px; 
 
     } 
 
     .compare_header_box_items{ 
 
      width: 100%; 
 
      border-bottom: 1px solid #ccc; 
 
      direction: ltr; 
 
     } 
 
     .compare_header_box_items a{ 
 
      display: inline-block; 
 
      font-size: 16px; 
 
      padding: 15px 40px; 
 
      
 
     } 
 
     .compare_header_box_items a:hover{ 
 
      text-decoration: none; 
 
      background-color: #f1f1f1; 
 
      color: black; 
 
     } 
 
     .compare_header_box_items .active{ 
 
      border-top: 3px solid orange; 
 
      border-right: 1px solid #ccc; 
 
      border-left: 1px solid #ccc; 
 
      border-bottom: 1px solid #fff; 
 
      margin-bottom: -1px; 
 
     }

<div class="compare_header_box"> 
 
      <span class="compare_header_box_title active">List</span> 
 
      <div class="compare_header_box_items"> 
 
       <a href="./gp">gp</a> 
 
       <a href="./in">in</a> 
 
       <a href="./tw">tw</a> 
 
       <a class="active" href="./fb">fb</a> 
 
      </div> 
 
     </div>

Answer 3

使用box-shadow代替border，它允許避免換擋元件的位置：

box-shadow: 0 1px white; 

（請注意，我已取代red在下面的代碼段強調）

.compare_header_box { 
 
    padding: 35px 30px; 
 
    direction: rtl; 
 
} 
 

 
.compare_header_box_title { 
 
    font-size: 30px; 
 
    width: 100px; 
 
    float: right; 
 
    margin-right: 5px; 
 
    margin-top: 4px; 
 
} 
 

 
.compare_header_box_items { 
 
    width: 100%; 
 
    border-bottom: 1px solid #ccc; 
 
    direction: ltr; 
 
} 
 

 
.compare_header_box_items a { 
 
    display: inline-block; 
 
    font-size: 16px; 
 
    padding: 15px 40px; 
 
} 
 

 
.compare_header_box_items a:hover { 
 
    text-decoration: none; 
 
    background-color: #f1f1f1; 
 
    color: black; 
 
} 
 

 
.compare_header_box_items .active { 
 
    border-top: 3px solid orange; 
 
    border-right: 1px solid #ccc; 
 
    border-left: 1px solid #ccc; 
 
    box-shadow: 0 1px red; /* white; */ 
 
}

<div class="compare_header_box"> 
 
    <span class="compare_header_box_title active">List</span> 
 
    <div class="compare_header_box_items"> 
 
    <a href="./gp">gp</a> 
 
    <a href="./in">in</a> 
 
    <a href="./tw">tw</a> 
 
    <a class="active" href="./fb">fb</a> 
 
    </div> 
 
</div>

Answer 4

HYY 只有這個事情是可能的，您的問題都會解決......

.compare_header_box_items .active { 
    position: relative; 
    bottom: -1px; 
} 

添加這個CSS，你的問題就解決了。

謝謝:)

欣賞我的答案。

Answer 5

利用僞元素，

.compare_header_box_items .active { 
    position: relative; 
    border-top: 3px solid orange; 
    border-right: 1px solid #ccc; 
    border-left: 1px solid #ccc; 
} 

.compare_header_box_items .active:after { 
    content: ''; 
    position: absolute; 
    width: 100%; 
    height: 1px; 
    background-color: #fff; 
    bottom: -1px; 
    left: 0; 
} 

我希望這是你需要

.compare_header_box { 
 
    padding: 35px 30px; 
 
    direction: rtl; 
 
} 
 

 
.compare_header_box_title { 
 
    font-size: 30px; 
 
    width: 100px; 
 
    float: right; 
 
    margin-right: 5px; 
 
    margin-top: 4px; 
 
} 
 

 
.compare_header_box_items { 
 
    width: 100%; 
 
    border-bottom: 1px solid #ccc; 
 
    direction: ltr; 
 
} 
 

 
.compare_header_box_items a { 
 
    display: inline-block; 
 
    font-size: 16px; 
 
    padding: 15px 40px; 
 
} 
 

 
.compare_header_box_items a:hover { 
 
    text-decoration: none; 
 
    background-color: #f1f1f1; 
 
    color: black; 
 
} 
 

 
.compare_header_box_items .active { 
 
    position: relative; 
 
    border-top: 3px solid orange; 
 
    border-right: 1px solid #ccc; 
 
    border-left: 1px solid #ccc; 
 
} 
 

 
.compare_header_box_items .active:after { 
 
    content: ''; 
 
    position: absolute; 
 
    width: 100%; 
 
    height: 1px; 
 
    background-color: #fff; 
 
    bottom: -1px; 
 
    left: 0; 
 
}

<div class="compare_header_box"> 
 
    <span class="compare_header_box_title active">List</span> 
 
    <div class="compare_header_box_items"> 
 
    <a href="./gp">gp</a> 
 
    <a href="./in">in</a> 
 
    <a href="./tw">tw</a> 
 
    <a class="active" href="./fb">fb</a> 
 
    </div> 
 
</div>

Answer 6

的白色邊框似乎出現兄弟。但背景也是白色的。改變背景，你會看到白色背景或作爲你的代碼的一部分，你可以將它懸停在上面，並檢查邊框。對於結果部分，上面有很多答案。這個答案只是說邊界是可見的，並且它旁邊的元素出現。

即使SOF使用填充來修復它。如果刪除，則會看到底部的#CCC 背景。