Wie erhalte ich Text unter Schaltflächen W3 Sidebar und w3-bar-Artikel w3-Taste angezeigt werden?

Question

Bisher habe ich dieses:

<div class="w3-sidebar w3-bar-block w3-indigo w3-xxlarge" style="width:70px"> 
    <a href="#" class="w3-bar-item w3-button"><i class="fa fa-user-circle"></i></a> 
    <a href="#" class="w3-bar-item w3-button"><i class="fa fa-id-card-o"></i></a> 
    <a href="#" class="w3-bar-item w3-button"><i class="fa fa-folder-open"></i></a> 
</div> 

Wenn ich Text in das ein Tag eingeben, endet der Text jumbled sucht und nicht unter der Taste geht so, wie ich es will. Wie kann ich das beheben?

Answer 1

Aktualisieren Sie Ihren Code wie diesen

<style> 
    i{ width:20px; 
    height:20px; 
    display:inline-block; } 
    a{ float:left; width:100%; text-align:center; } 
    span{ float:left; width:100%; text-align:center; } 
</style> 

    <div class="w3-sidebar w3-bar-block w3-indigo w3-xxlarge" 
    style="width:70px"> 
        <a href="#" class="w3-bar-item w3-button"><i class="fa fa-user-circle"></i><span>Text 1</span></a> 
        <a href="#" class="w3-bar-item w3-button"><i class="fa fa-id-card-o"></i><span>Text 1</span></a> 
        <a href="#" class="w3-bar-item w3-button"><i class="fa fa-folder-open"></i><span>Text 1</span></a>  
    </div> 

Answer 2

machte ich einen codepen, die übereinstimmen sollten, was Sie zu tun versuchen:

Hier ist die CSS:

.w3-sidebar { 
    width: auto; 
} 

.w3-bar-block .w3-bar-item { 
    /* Overrides default rule */ 
    text-align: center; 
} 

.sidebar-icon-label { 
    display: block; 
    font-size: 10px; 
} 

Sie werden sehen, dass ich den Inline-Stil Ihres w3-s entfernt habe idbar, und setzen Sie es stattdessen auf "auto", was bedeutet, dass es die Größe seines Inhalts hat.

habe ich eine neue Klasse für Ihr Symbol Etiketten und overrode eine native w3 Regel alles zu zentrieren.