Kleine seltsame Rendering Bug

Question

Es gibt zwei kleine "Bugs", wenn ich meine CSS-Registerkarten rendern. Wenn ich auf die dritte Registerkarte drücke, verschwindet die vertikale Linie nach links. Im Beispiel in der Anleitung von semantic-ui passiert es nicht und die Zeile ist da, wenn ich "dritte" drücke. Ich frage mich, was mit dem Code falsch sein kann.

$(function() { 
 
    $('.menu .item').tab(); 
 
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.2/semantic.min.css" rel="stylesheet" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.2/semantic.min.js"></script> 
 
<div class="ui top attached tabular menu"> 
 
    <a class="item active" data-tab="first">First</a> 
 
    <a class="item" data-tab="second">Second</a> 
 
    <a class="item" data-tab="third">Third</a> 
 
</div> 
 
<div class="ui bottom attached tab segment active" data-tab="first"> 
 
    First 
 
</div> 
 
<div class="ui bottom attached tab segment" data-tab="second"> 
 
    Second 
 
</div> 
 
<div style="margin-right:0px;margin-left:0px" class="ui bottom attached tab segment" data-tab="third"> 
 
    Third 
 
</div>

Wenn Sie vergleichen die Taste „zweite“ bis „dritter“ dann die vertikale Linie auf der linken Seite verschwindet, die es nicht tun sollte. Kannst du den Fehler finden?

Answer 1

Wenn Sie die .ui.attached.segment Klassenform semantic.min.css betrachten, hat sie einen Rand: 0 -1px, der einen Rand links und rechts von -1px hinzufügt.

Für die zweite Registerkarte scheint dieser Rand von .ui.tabular.menu+.attached:not(.top).segment+.attached:not(.top).segment überschrieben, während es für die dritte nicht überschrieben wird.

Eine einfache Lösung wäre ein margin-rechts/links von 0px auf die dritte Registerkarte hinzuzufügen