Wie setze ich den inneren Elementrand auf den äußeren?

Question

Hier ist mein Code:

 .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>

Wie Sie border-bottom: 1px solid white; sehen nicht erscheinen zu sein scheinen. Ich möchte es genau auf die border-bottom: 1px solid #ccc; setzen. Wie kann ich das machen?

Answer 1

hinzufügen margin-bottom: -1px-a Tags in .compare_header_box_items div

So wird Code werden:

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

Der Grund Code nicht funktioniert, beginnen Haupt-div Grenze, wenn Bereich innere Links Enden, die auch ihre Grenzen umfasst . Wenn Sie also einen negativen 1-Pixel-Rand hinzufügen, werden die beiden Ränder überlappt.

Answer 2

Als Hotfix fügen Sie einfach Folgendes hinzu: margin-bottom: -1px; Überprüfen Sie den folgenden Codeausschnitt.

.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

Verwenden box-shadow statt border, die Sie Verschieben der Positionen der Elemente zu vermeiden erlaubt:

box-shadow: 0 1px white; 

(Beachten Sie, dass ich red zur Betonung im Snippet unten ersetzt haben .)

.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 Nur diese Dinge möglich ist und Ihr Problem lösen ...

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

Fügen Sie diese CSS und Ihr Problem zu lösen.

Danke :)

Schätzen Sie meine Antwort.

Answer 5

Nutzen Sie Pseudo Elemente,

.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; 
} 

Ich hoffe, das ist, was Sie

.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

erfordern Der weiße Grenze scheint bro zu erscheinen. Aber der Hintergrund ist auch weiß. Ändern Sie den Hintergrund und Sie werden den weißen Hintergrund sehen oder als Teil Ihres Codes können Sie einfach darüber bewegen und den Rahmen überprüfen. Zum Ergebnisteil gibt es so viele Antworten oben. Diese Antwort soll nur sagen, dass der Rahmen sichtbar ist und das Element daneben erscheint.

Sogar SOF verwendet Polsterung, um es zu beheben.Wenn Sie entfernen, sehen Sie den unteren Rand #CCC Hintergrund.