wie legen Sie Anker-Tags text-Breite mit css?

Habe ich html und css wie unten -

    .title {
        display: block; background-color: red;
    }

<a href="#">
    <span class="title">Text</span>
</a>

Konnte ich sehen, dass die SPANNE erstreckt sich auf die 100% der verfügbaren Breite (wegen display: block). Wie unten

|----------------------------------------------------|
| Text                                               |
|----------------------------------------------------|

In Firefox, ich kann Sie überall in den oben genannten box, und es dauert mir zu der verlinkten Seite. Jedoch Im IE (IE 7) bekomme ich den cursor als hand nur, wenn ich den Mauszeiger über "Text", nur text.

Was hack werde ich das tun müssen, damit es funktioniert (genauso wie im FF) im IE?

Ich habe versucht, indem Sie die Anker-Tags selbst (und nicht nur der text), im span, aber es funktioniert nicht.

Dank.

Versuchen Sie, den Anker ein block-element. Ansonsten musst du ein block-element (span mit display: block) innerhalb eines inline-Elements.
funktioniert bei mir (IE6,7 und 8)...also es könnte auch etwas anderes sein? Wenn nicht, würde ich vorschlagen, zu tun, als David schlägt vor, unter, als, dass ist eine bessere Lösung. (funktioniert auch in IE6,7 und 8)
Ja .. hab es. Danke.
ja .. Einstellung Anker als block hat den trick. Cheers.

InformationsquelleAutor TigerTiger | 2009-07-09

16

Stil der Anker und entfernen Sie den span.

(Das problem liegt daran, wie einige Browser verarbeiten Elemente, die display: block im inneren Elemente display: inline. Sie können es umgehen, styling sowohl im Anker als auch den span, aber die Spanne erscheint redundant in diesem Beispiel)

InformationsquelleAutor Quentin
8

für Ihre <a> tag, machen den style "display: block; width:100%;"

InformationsquelleAutor Rik Heywood
0

Definitiv zu löschen, müssen Sie die Spanne und wenden diese Klasse auf die Anker-tag. Ich glaube nicht, dass Sie brauchen, um stellen Sie die Breite auf 100% explizit, aber ich könnte falsch sein.

InformationsquelleAutor Alex Morales
0

Entfernen Sie das zusätzliche span-und Titel-Klasse auf dem link selbst. Dann fügen Sie width:100%; im css.

Weniger markup ist meistens besser, das ist, warum sollten Sie entfernen, die gegen span.

InformationsquelleAutor corymathews
0

können Sie auch mit margin oder padding

InformationsquelleAutor
0

Geben einen Stil zu Anker display:block und max-width:30px !important; max-width Größe
```
li a {
    display: block;
    height: 30px;
    max-width: 30px !important;
}
```
InformationsquelleAutor Himani

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.