ändern - html verschachtelte listen




Zeige ungeordnete Liste inline, aber behalte die Aufzählungszeichen (8)

Ich habe eine HTML-Datei mit einer ungeordneten Liste. Ich möchte die Listenelemente horizontal anzeigen, aber die Aufzählungszeichen behalten. Egal, was ich versuche, immer wenn ich den Stil auf Inline setze, um die horizontale Anforderung zu erfüllen, kann ich die Aufzählungszeichen nicht anzeigen.


Der Browser zeigt die Aufzählungszeichen an, da die Stileigenschaft "display" anfangs auf "list-item" gesetzt ist. Wenn Sie die Anzeigeeigenschaft in "Inline" ändern, werden alle Sonderstile gelöscht, die Listenelemente erhalten. Sie sollten in der Lage sein, es mit dem: before-Selektor und der content-Eigenschaft zu simulieren, aber IE (zumindest bis Version 7) unterstützt sie nicht. Die Simulation mit einem Hintergrundbild ist wahrscheinlich der beste browserübergreifende Weg, dies zu tun.


Es ist eigentlich eine sehr einfache Lösung. Fügen Sie Folgendes zur ul hinzu:

display:list-item;

Wenn Sie diese CSS-Zeile hinzufügen, werden die Aufzählungspunkte hinzugefügt.


Halten Sie die Anzeige blockiert, geben Sie ihnen eine Breite und schwimmen Sie nach links.

Das wird sie nebeneinander sitzen lassen, was wie Inline ist und den Listenstil beibehalten sollte.


Ich habe einfach herumgespielt und bin auf das gleiche Problem mit den gleichen Browserbeschränkungen gestoßen. Als ich nach einer Antwort suchte, kam dein Beitrag ohne Antwort. Das ist wahrscheinlich zu spät, um Ihnen zu helfen, aber ich dachte, ich sollte es für die Nachwelt veröffentlichen.

Alles, was ich getan habe, um mein Problem zu lösen, war, eine weitere Liste mit einem Eintrag in jedes Listenelement der ersten Liste einzubetten. wie so ...

HTML:

<div class="block-list">
  <ul>
    <li><ul><li>a</li></ul></li>
    <li><ul><li>b</li></ul></li>
    <li><ul><li>c</li></ul></li>
  </ul>
</div>

CSS:

.block-list > ul > li { display: inline; float: left; }

IE7 Seite:

    o a o b o c

... es ist eine dumme Lösung, aber es scheint zu funktionieren.


In HTML habe ich nach jedem li eine Pause hinzugefügt:

<li>Water is Sacred</li><br>
<li>Water is Sacred</li><br>
<li>Water is Sacred</li><br>
<li>Water is Sacred</li><br>
<li>Water is Sacred</li><br>
<li>Water is Sacred</li><br> 

Und CSS:

li { float:left; }


Sie könnten auch ein Hintergrundbild auf den <li> -Elementen verwenden, mit einem Füllzeichen, damit der Text nicht überlappt.

li {
  background-image: url(i/bullet.gif) no-repeat center left;
  padding-left: 20px;
  display: inline;
}

Die beste Option, die ich in anderen Antworten sah, war float:left; .. Leider funktioniert es nicht in IE7, was hier eine Voraussetzung ist * - Sie verlieren immer noch die Kugel. Ich bin auch nicht wirklich daran interessiert, ein Hintergrundbild zu verwenden.

Was ich stattdessen tun werde (das niemand anderes vorschlug, also die Selbstantwort), ist das manuelle Hinzufügen von &bull; zum my html, anstatt dies zu stylen. Es ist weniger als ideal, aber es ist die kompatibelste Option, die ich gefunden habe.

edit : * Aktuelle Leser nehmen das ursprüngliche Postdatum zur Kenntnis. IE7 ist wahrscheinlich keine Sorge mehr.







css