HTML UL Breite

Gegeben Sie das folgende markup:

<ul>
   <li>apple</li>
   <li class="highlight">orange</li>
   <li>pear</li>
</ul>

Sowohl die ul's und die li's breiten erscheinen 100%. Habe ich, wenn ich eine background-color auf der Liste Element, das highlight erstreckt sich die gesamte Breite der Seite.

Ich will nur den hintergrund, highlight, Strecke, die so breit sind wie das breiteste Element (mit vielleicht einige padding). Wie kann ich beschränken, die li's (oder vielleicht die ul's), Breite auf die Breite des größten Elements?

InformationsquelleAutor der Frage Jacob Carpenter | 2008-10-31

  1. 31

    Hinzufügen ul {float: left; } Stil zwingen wird, Ihre Liste in die bevorzugte Breite, das ist, was Sie wollen.

    Problem ist, sollten Sie sicherstellen, dass das nächste element ist unten die Liste, wie vorher auch. Clearing sollte sich darum kümmern.

    InformationsquelleAutor der Antwort buti-oxa

  2. 2

    Können Sie es so machen?

    <ul>
   <li>apple</li>
   <li><span class="highlight">orange</span></li>
   <li>pear</li>
</ul>

    InformationsquelleAutor der Antwort BoltBait

  3. 2

    Genau wie BoltBait sagte, wickeln Sie Ihren text in ein inline-element, wie span und geben an, dass die Klasse.

    <ul>
    <li>apple</li>
    <li><span class="highlight">orange</span></li>
    <li>pear</li>
</ul>

    Meinen zusätzlichen 2 Cent ist, wenn Sie keinen Zugriff haben, ändern Sie die HTML, du kannst es mit Javascript. In jQuery:

    $('li.highlight').wrapInner("<span></span>");

    und verwenden Sie die CSS:

    li.highlight span { background-color: #f0f; }

    edit: nach re-Lektüre Ihrer Frage, können Sie klären: wollen Sie die Höhepunkt nur so breit ist wie das element, das hervorgehoben wird, oder so breit wie das breiteste element in der Liste? eg:

     - kurz 
- Elemente ******************** 
- hier 
- und dann eine wirklich lange

    ...wo die Sternchen stehen für die Hervorhebung. Wenn dem so ist, dann buti-oxa s Antwort ist die einfachste Art und Weise. nur vorsichtig sein, mit clearing-Ihr schwebt.

    InformationsquelleAutor der Antwort nickf

  4. 0

    Hinzufügen style="float: left;" zu ul verursachen die ul nur Strecke, die so breit sind wie das breiteste Element. Allerdings, das nächste element wird platziert auf der rechten Seite. Hinzufügen style="clear: left;" auf das nächste element das nächste element nach dem ul.

    Probieren Sie es aus

    Sehen Dokumentation auf float und clear.

    InformationsquelleAutor der Antwort Nathan

  5. 0

    Der beste Weg zu gehen über die Lösung dieses ohne vermasselt den Stil Ihres vorhandenen Layouts ist durch die Verpackung des ul und li im div mit display: inline-block 

       <div id='dropdown_tab' style='display: inline-block'>dropdown
        <ul id='dropdown_menu' style='display: none'>
            <li>optoin 1</li>
            <li>optoin 2</li>
            <li id='option_3'>optoin 3
                <ul id='dropdown_menu2' style='display: none'>
                    <li>second 1</li>
                    <li>second 2</li>
                    <li>second 3</li>
                </ul>
            </li>
        </ul>
    </div>

    InformationsquelleAutor der Antwort redress

Schreibe einen Kommentar