Räume zwischen Elementen bearbeiten

Question

Ich habe eine Pille/Tab Navigationsmenü, und ich muss das Menü mit dem Rest des Körpers und der Unterstreichung der Divs verbinden, um das Menü gut aussehen zu lassen.

Ich brauche den Raum zwischen dem schwarzen und gelben und schließen Sie die unterstrichenen divs

.tab { 
 
    display: inline-block; 
 
    text-align: center; 
 
    border-bottom: 1px solid white; 
 
    width: 75px; 
 
} 
 

 
.selected { 
 
    border: 1px solid white; 
 
    border-bottom: none; 
 
    border-top-left-radius: 5px; 
 
    border-top-right-radius: 5px; 
 
    background-color: rgba(0,0,0,1); 
 
} 
 

 
.createScreen { 
 
    display: block; 
 
    background-color: yellow; 
 
    width: 985px; 
 
    height: 500px; 
 
} 
 

 
.personalContainer { 
 
    margin-left: 5px; 
 
} 
 

 
.personalContainer, .shippingContainer, .billingContainer, .cardContainer { 
 
    margin-top: 5px; 
 
    display: inline-block; 
 
    background-color: rgba(0,0,0,0.25); 
 
    height: 400px; 
 
    width: 240px; 
 
}

<div class="billingNav"> 
 
    <div id="#createTab" class="tab selected">Create</div> 
 
    <div id="#editTab" class="tab notSelected">Edit</div> 
 
    <div id="#deleteTab" class="tab notSelected">Delete</div> 
 
</div> 
 
<div class="createScreen show"> 
 
    <div class="personalContainer"> 
 
    </div> 
 
    <div class="shippingContainer"> 
 
    </div> 
 
    <div class="billingContainer"> 
 
    </div> 
 
    <div class="cardContainer"> 
 
    </div> 
 
    </div> 
 
    <div class="editScreen"> 
 
    </div> 
 
    <div class="deleteScreen"> 
 
</div>

Answer 1

Loswerden des Leerzeichen um Farbe zwischen den unterstrichenen Elemente verbunden ihre Grenzen

 <div id="#createTab" class="tab selected">Create</div><div 
id="#editTab" class="tab notSelected">Edit</div><div id="#deleteTab" 
class="tab notSelected">Delete</div> 

Answer 2

Wenn Sie die kleine Lücke zwischen Ihrem ausgewählten Tab und dem Menü gemeint haben, können Sie nicht border-bottom: none; machen.

Stattdessen empfehle ich Ihnen nur überschreiben die tab Vorlieben, so die unterste Grenze der ausgewählten Registerkarte ist schwarz:

.selected { 
    border: 1px solid white; 
    border-bottom: 1px solid black; 
    border-top-left-radius: 5px; 
    border-top-right-radius: 5px; 
    background-color: rgba(0,0,0,1); 
} 

Answer 3

Das könnte Sie näher an das Ergebnis erhalten Sie brauchen, bevor diese Codes pls ersetzen entfernen .ausgewählt von css.

.billingNav { 
padding: 5px; 
background-color: #444; 
} 
.tab { 
display: inline-block; 
margin-bottom: 5px; 
text-align: center; 
width: 75px; 
color: #fff; 
} 
.tab:hover { 
border-bottom: 2px solid #fff; 
} 

Answer 4

Um die Laschen zusammen (keine Lücke zwischen den Tabs) verbinden Sie this question sehen können. Es gibt mehrere Methoden, wie zum Beispiel das Entfernen der Leerzeichen im HTML zwischen den Inline-Blockelementen (keine neue Zeile zwischen dem vorherigen und dem nächsten Element). Sie können auch negative Buchstabenabstände für Eltern verwenden und sie auf cild (tab) -Elementen auf normal zurücksetzen.

Die kleine weiße Lücke unter den Menüelementen wird durch den .tab {... border-bottom: 1px solid white;} Stil erzeugt, den Sie für Registerkarten festgelegt haben, aber border-bottom: none; auf der ausgewählten Registerkarte. Um diesen Bereich zu entfernen, entfernen Sie einfach den unteren Rand von der Registerkarte.

Hier ist eine Arbeitsprobe:

.billingNav {letter-spacing: -1em;} 
 

 
.tab { 
 
    display: inline-block; 
 
    text-align: center; 
 
    letter-spacing: normal; 
 
    border-top-left-radius: 5px; 
 
    border-top-right-radius: 5px; 
 
    width: 75px; 
 
    border-right: 1px solid white; 
 
    background-color: rgba(200,200,200,1); 
 
} 
 

 
.selected { 
 
    /*border: 1px solid white;*/ 
 
    /*border-bottom: none;*/ 
 
    background-color: rgba(0,0,0,1); 
 
    color: white; 
 
} 
 

 
.createScreen { 
 
    display: block; 
 
    background-color: yellow; 
 
    width: 985px; 
 
    height: 500px; 
 
} 
 

 
.personalContainer { 
 
    margin-left: 5px; 
 
} 
 

 
.personalContainer, .shippingContainer, .billingContainer, .cardContainer { 
 
    margin-top: 5px; 
 
    display: inline-block; 
 
    background-color: rgba(0,0,0,0.25); 
 
    height: 400px; 
 
    width: 240px; 
 
}

<div class="billingNav"> 
 
    <div id="#createTab" class="tab selected">Create</div> 
 
    <div id="#editTab" class="tab notSelected">Edit</div> 
 
    <div id="#deleteTab" class="tab notSelected">Delete</div> 
 
</div> 
 
<div class="createScreen show"> 
 
    <div class="personalContainer"> 
 
    </div> 
 
    <div class="shippingContainer"> 
 
    </div> 
 
    <div class="billingContainer"> 
 
    </div> 
 
    <div class="cardContainer"> 
 
    </div> 
 
    </div> 
 
    <div class="editScreen"> 
 
    </div> 
 
    <div class="deleteScreen"> 
 
</div>

:

.billingNav {letter-spacing: -1em;} 
 

 
.tab { 
 
    display: inline-block; 
 
    text-align: center; 
 
    letter-spacing: normal; 
 
    border-top-left-radius: 5px; 
 
    border-top-right-radius: 5px; 
 
    width: 75px; 
 
    /*border-right: 1px solid white; 
 
    background-color: rgba(200,200,200,1);*/ 
 
} 
 

 
.selected { 
 
    /*border: 1px solid white;*/ 
 
    /*border-bottom: none;*/ 
 
    background-color: rgba(0,0,0,1); 
 
    color: white; 
 
} 
 

 
.createScreen { 
 
    display: block; 
 
    background-color: yellow; 
 
    width: 985px; 
 
    height: 500px; 
 
} 
 

 
.personalContainer { 
 
    margin-left: 5px; 
 
} 
 

 
.personalContainer, .shippingContainer, .billingContainer, .cardContainer { 
 
    margin-top: 5px; 
 
    display: inline-block; 
 
    background-color: rgba(0,0,0,0.25); 
 
    height: 400px; 
 
    width: 240px; 
 
}

<div class="billingNav"> 
 
    <div id="#createTab" class="tab selected">Create</div> 
 
    <div id="#editTab" class="tab notSelected">Edit</div> 
 
    <div id="#deleteTab" class="tab notSelected">Delete</div> 
 
</div> 
 
<div class="createScreen show"> 
 
    <div class="personalContainer"> 
 
    </div> 
 
    <div class="shippingContainer"> 
 
    </div> 
 
    <div class="billingContainer"> 
 
    </div> 
 
    <div class="cardContainer"> 
 
    </div> 
 
    </div> 
 
    <div class="editScreen"> 
 
    </div> 
 
    <div class="deleteScreen"> 
 
</div>

Ein anderes Aussehen durch Hinzufügen eines Hintergrund und kleinen rechten Rand zu (nicht gewählt) Registerkarten erreicht werden könnte

Answer 5

Ich persönlich würde die vertical-align so einstellen, dass die Laschen die Werte zwischen in-keine Lücke haben sie bereits einen übergeordneten div Container haben so die CSS

.tabSelected { 
vertical-align: -4px; // or however many you need so that there is no gap