Stellen Sie span füllen Sie ein Tag

Ich habe bootstrap Markup mit a Tags mit span Elemente mit Glyphon-Klassen. Allerdings kann ich das Glyphon span nicht so einstellen, dass es sich im vollen Umfang der Breite ausdehnt, die vom Tag a verfügbar ist. Hier ist mein Code:Stellen Sie span füllen Sie ein Tag

HTML:

<a class='app-nav--links' href='#'> 
    <span class="glyphicon glyphicon-music" aria-hidden="true"></span> 
</a>

SCSS:

.app-nav { 
    .app-nav--links { 
     display: inline-block; 
     width: 60px; 
     & span { 
     width: 100%; 
     display:inline-block; 
     } 
    }

Irgendwelche Ideen?

Quelle

2017-10-14 IsaaK08

Haben Sie versucht, 'display: block' für die fraglichen 'span'-Elemente zu deklarieren? – UncaughtTypeError

Ja, funktioniert nicht ... – IsaaK08

Der Code, den Sie gezeigt haben, funktioniert (sobald das SCSS in CSS umgewandelt wird), also muss es etwas anderes sein, das das Problem verursacht. Was genau passiert? Können Sie ein Arbeits-Snippet erstellen, um das Problem zu veranschaulichen? [So erstellen Sie ein ausführbares Code-Snippet] (https://stackoverflow.blog/2014/09/16/introducing-runnable-javascript-css-and-html-code-snippets/) – FluffyKitten

Okay, ich habe es gelöst, indem ich font-size zum span Tag hinzugefügt habe. Hier ist der Code:

.app-nav { 
    .app-nav--links { 
     display: inline-block; 
     width: 60px; 

     span { 
     width: 100%; 
     font-size: 50px; 
     } 
    }

Quelle

2017-10-14 15:40:26 IsaaK08

Ihr Code tatsächlich machte die span füllen das Tag. Wenn Sie die Größe von Glyphon erhöhen möchten, sollten Sie seine font-size erhöhen.

Quelle

2017-10-14 15:45:52 Cons7an7ine

ops. Sieht so aus als hättest du es schon herausgefunden :) gute Arbeit! – Cons7an7ine

Stellen Sie span füllen Sie ein Tag

Antwort

Verwandte Themen