Ist es möglich, eine Liste innerhalb eines span-tag?

Ich bin mir bewusst, dass <span> - tag ist ein inline-element, während <li> ist ein block-element. Wir haben jedoch ein tooltip, der verwendet ein <span> tag und wir möchten den text hinein, dass der tooltip in einer Liste. Allerdings setzen <ul><li> im inneren span funktioniert nicht in allen Browsern (und ungültig).

Dies ist der HTML-code:

<a class='tooltip'>Text<span>Text that we want to become a list</span></a>

Ist es möglich, umgehen?

  • Nicht sicher, ob das auch funktioniert...aber versuchen Sie die Anwendung display:block auf den span-tag?
  • Haben Sie versucht, die Platzierung einer Liste innerhalb einer Zeitspanne?
  • Muss es sein, in einem span? Könnte man es in ein div-und style es verhält sich wie ein span? Damit wäre es gültig und vielleicht besser funktionieren.
InformationsquelleAutor catandmouse | 2011-07-18
  1. 1

    Obwohl, ich würde keine sorgen zu viel über ungültige code in diesem Beispiel gegeben, dass Sie es wissen, wenn die ul li bricht ein Teil des Codes, können Sie das folgende tun, das ist wahrscheinlich auch ungültig:

    <a class='tooltip'>Text<span>List item 1<br />
                             List item 2<br />
                             List item 3</span></a>
    InformationsquelleAutor Jason Gennaro
  2. 0

    Versuchen. Die Chancen sind, wenn Sie wollen, um ein block-element innerhalb eines inline-Elements, die Sie wirklich wollen, dass Sie beide auf block-Elemente:

    <a class='tooltip' style="display: block;">Text
    <div>
        <ul>
            <li>Item 1</li>
            <li>Item 2</li>
        </ul>
    </div>
</a>

    Oder für all Eure Hilfestellungen:

    a.tooltip{
    display: block;
}
    InformationsquelleAutor Paulpro
  3. 0

    Ich denke, die technische Antwort, die Sie suchen ist, dass der QuickInfo-text gehen sollte innerhalb der Titel - Attribut des Anker-Tags selbst.

    <a href="link.htm" title="&bull;List item 1 &#10; &bull;List item 2 &#10;">Text</a>

    Es ist immer noch nicht "schön", aber semantisch ist es näher an, was Sie suchen. Plus, können Sie javascript verwenden, um zu pflücken, die Titel Wert von Anker-tag zu tun, etwas schöner mit.

    InformationsquelleAutor St.G
  4. 0

    Einfach eine Klasse verwenden:

    <ul class='melikenachos'>
</ul>
    InformationsquelleAutor
Schreibe einen Kommentar