HTML CSS wie kann ich unterstreichen, alle li in einer verschachtelten Liste

Basierend auf w3c-der richtige Weg in den HTML-Code für eine verschachtelte Liste.

<ul>
  <li>Coffee</li>
  <li>Tea
    <ul>
    <li>Black tea</li>
    <li>Green tea</li>
    </ul>
  </li>
  <li>Milk</li>
</ul>

Möchte ich aber eine Grenze an der Unterseite von jedem Element in der Liste, den folgenden code unterstreicht Sie alle, aber Tee.

li {
    border-bottom: 1px solid purple;
}

Irgendwelche Vorschläge?

  • text-decoration: underline?
  • Tee wahrscheinlich IST Unterstrichen, aber es ist "gedeckt" durch die Zeile unter GreenTea
  • wrap alle Texte in span. und tun, unterstreichen die Spannweite statt. Geige.
  • li ul li { text-decoration:underline; } besser, verwenden Sie Klassen-Selektoren, um wählen Sie die gewünschten Elemente aus, denke ich
InformationsquelleAutor Tristanisginger | 2014-06-05
  1. 3

    Vielleicht können Sie 

    text-decoration: underline

    Dies gilt für den text im element.

    Dein problem ist, dass die li mit tea tatsächlich eine Grenze, aber es ist eine untere Grenze, so ist es unterhalb der verschachtelten li.

    Anstatt text-decoration Sie können auch wickeln Sie den text in ein anderes element (span oder div) innerhalb der li Elemente, und übernehmen Sie die Grenze zu diesem. Eine solche Lösung mit div ist besonders nützlich, wenn Sie wollen die Grenze zu sein, die volle Breite des Elements anstatt des Textes allein.

    InformationsquelleAutor GolezTrol
  2. 3

    wenn du meinst Grenze unten auf alles, was Sie tun müssen, wird so etwas wie dieses:

    li {
    border-bottom: 1px solid purple;
}

li > ul {
    border-top: 1px solid purple;
}

li > ul > li:last-child {
    border: none;
}

    Beispiel

    Alternative

    Gleiche Länge der Zeilen (aber Sie müssen einen Weg finden, der Einzug der zweiten Ebene bullets)

    Ansonsten verwenden Sie einfach text-dexoration

    • hahaha, das sollte die Dekoration nicht dexoration
    InformationsquelleAutor Pete
  3. 2

    Den "Tee" li HAT eine Grenze, es ist nur 'maskiert', die von der Grenze des letzten Untermenü li

    Sehen JSfiddle

    li {
    border-bottom:3px solid red;
}

li ul li {
    border-bottom:3px solid green;
}
    InformationsquelleAutor Paulie_D
  4. 1

    Als alle oben genannten, dass die Grenze tatsächlich existiert für den text "Tee", die auf ganz unten weil li element hat display: list-item standardmäßig zugewiesen. Machen Sie es sichtbar, indem display: inline aber Bedenken Sie, dass, verlieren Sie die Funktionen von li element wie list-style-type denn Sie gelten nur für display: list-item. 

    li {
    border-bottom: 1px solid purple;
    display: inline;
}
li:after {
    content:"";
    display: block;
}

    Arbeitet Fiddle

    InformationsquelleAutor Mr_Green
  5. 1

    Dieses problem wird durch die Tatsache verursacht, dass der "Tee" li " tag "enthält nicht nur "Tee", aber alle anderen ul-und li-tag-paar, außer für die mit "Milch". Der "Tee" li ist immer Unterstrichen, was eigentlich die unter dem 'Grünen Tee' unterstreichen (wenn Sie genau hinsehen, werden Sie bemerken sollten, doppelt Unterstrichen gibt es, vor allem, wenn Sie hinzufügen Polsterung an Sie li-tags.) Ihre beste Wette in dieser situation (wenn Sie den Aufbau der Liste programmgesteuert) ist, wickeln Sie die li-Elemente in ein anderes tag:

    <ul>
  <li><span>Coffee</div></li>
  <li><span>Tea</span>
    <ul>
    <li><span>Black tea</span></li>
    <li><span>Green tea</span></li>
    </ul>
  </li>
  <li><span>Milk<span></li>
</ul>

    dann den code ändern zu:

    li span{
    border-bottom: 1px solid purple;
}

    Dadurch wird sichergestellt, dass der text Unterstrichen wird, und nicht den li-tag mit dem text.

    Bearbeiten:=====================

    Dies ist die gleiche Sache, dass Mr Green empfiehlt in seinem Kommentar

    InformationsquelleAutor Hoytman
  6. 1

    Gibt es verschiedene Möglichkeiten, es zu lösen, ging ich mit diesem.

    li {
    border-bottom: 1px solid purple;
}

li > ul > li:first-child {
    border-top: 1px solid purple;
}

li > ul > li:last-child {
    border: none;
}
    InformationsquelleAutor Tristanisginger
  7. 0

    Geben Sie eine Klasse hinzufügen display: inline-block so:

      <ul>
    <li>
      <ul>
          <li class="underline">
             Some stuff here
          </li>
      </ul>
   </li>
  </ul>

    - und in deiner css:

    .underline {
     display: inline-block;
     border-bottom: 1px #CCCCCC solid;
}
    InformationsquelleAutor Jean Paul
Schreibe einen Kommentar