Wie kann ich eine ungeordnete Liste inline mit Aufzählungszeichen anzeigen?

StackOverflow https://stackoverflow.com/questions/34399

  •  09-06-2019
  •  | 
  •  

Frage

Ich habe eine HTML-Datei mit einer ungeordneten Liste.Ich möchte die Listenelemente horizontal anzeigen, aber trotzdem die Aufzählungszeichen behalten.Egal, was ich versuche, wenn ich den Stil auf „Inline“ stelle, um die horizontalen Anforderungen zu erfüllen, werden die Aufzählungszeichen nicht angezeigt.

War es hilfreich?

Lösung

Die beste Option, die ich in anderen Antworten gesehen habe, war die Verwendung float:left;.Leider funktioniert es nicht im IE7, was hier eine Voraussetzung ist* – Du verlierst immer noch die Kugel.Ich habe auch keine große Lust, ein Hintergrundbild zu verwenden.

Was ich stattdessen tun werde (was sonst niemand vorgeschlagen hat, daher die Selbstantwort), ist, manuell hinzuzufügen • zu meinem HTML hinzufügen, anstatt dies zu formatieren.Es ist nicht ideal, aber es ist die kompatibelste Option, die ich gefunden habe.

bearbeiten: *Aktuelle Leser beachten das ursprüngliche Veröffentlichungsdatum.IE7 wird wahrscheinlich kein Problem mehr sein.

Andere Tipps

Ich hatte das gleiche Problem, aber nur im Internet Explorer (ich habe Version 7 getestet) – nicht in Firefox 3 oder Safari 3.Verwendung der :Vor Selektor funktioniert bei mir:

ul.tabs li {
  list-style: none;
  float: left;
}
ul.tabs li:before {
  content: '\ffed';
  margin-right: 0.5em;
}

Ich verwende hier ein quadratisches Aufzählungszeichen, aber ein normales Aufzählungszeichen \2022 würde genauso funktionieren.

Sie können auch ein Hintergrundbild für die <li>-Elemente verwenden, mit einem Abstand, um zu verhindern, dass der Text sie überlappt.

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

Der Browser zeigt die Aufzählungszeichen an, da die Stileigenschaft „display“ zunächst auf „list-item“ gesetzt ist.Durch Ändern der Anzeigeeigenschaft in „inline“ werden alle speziellen Stile gelöscht, die Listenelemente erhalten.Sie sollten es mit dem :before-Selektor und der content-Eigenschaft simulieren können, aber der IE (zumindest bis Version 7) unterstützt sie nicht.Die Simulation mit einem Hintergrundbild ist wahrscheinlich die beste browserübergreifende Möglichkeit, dies zu tun.

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

display:list-item;

Durch das Hinzufügen dieser CSS-Zeile werden die Aufzählungspunkte hinzugefügt.

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

Dadurch bleiben sie nebeneinander, was wie inline ist, und sollten den Listenstil beibehalten.

Hast du versucht float: left auf Ihrem <li/>?Etwas wie das:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
                      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
    <style type="text/css">
        ul li {
            float: left;
            margin-left: 2em;
        }
    </style>
</head>
<body>
    <ul>
        <li>test</li>
        <li>test2</li>
    </ul>
</body>
</html>

Ich habe nur Firefox 3.0.1 getestet, funktioniert dort.Der margin ist gesetzt, da Ihr Aufzählungszeichen sonst das vorherige Element überlappt.

Zusatz:Seien Sie vorsichtig, wenn Sie die Gegenstände schweben lassen, entfernen Sie sie aus dem normalen Fluss, was wiederum dazu führt, dass <ul/> keine Höhe haben.Wenn Sie einen Rahmen oder ähnliches hinzufügen möchten, erhalten Sie seltsame Ergebnisse.

Eine Möglichkeit, dies zu beheben, besteht darin, Ihren Stilen Folgendes hinzuzufügen:

ul {
    overflow: auto;
    background: #f0f;
}

Ich habe nur herumgespielt und bin auf das gleiche Problem mit den gleichen Browser-Einschränkungen gestoßen;Als ich nach einer Antwort suchte, wurde Ihr Beitrag ohne Antwort angezeigt.Das ist wahrscheinlich zu spät, um Ihnen zu helfen, aber ich dachte, ich sollte es der Nachwelt zuliebe veröffentlichen.

Um mein Problem zu lösen, habe ich lediglich eine weitere Liste mit einem Element in jedes Listenelement der ersten Liste eingebettet.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 sie scheint zu funktionieren.

Sie könnten Zeichenentitäten verwenden, siehe Referenz: http://dev.w3.org/html5/html-author/charref

<ul class="inline-list>
  <li> &bullet; Your list item </li>
</ul>

In HTML habe ich nach jedem Li eine Pause eingefügt, etwa so:

<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önnen den folgenden Code verwenden

li {
    background-image: url(img.gif) no-repeat center left;
    padding-left: 20px;
    display: inline;
}
Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top