<li> <ul> newline

So, was ich benötige Hilfe, wie Entferne ich den Zeilenumbruch nach einem <li> und oder <ul>

Dies ist mein css:

    #ranks li {
    background: url(/img.png) no-repeat top left;
}
#ranks .sprite-admin{ background-position: 0 0; width: 157px; height: 44px; } 
#ranks .sprite-banned{ background-position: -207px 0; width: 157px; height: 44px; }

- und dies ist der html:

<ul id="ranks"><li class="sprite-admin"></li></ul>

Es funktioniert alles gut, wenn nur einer der <ul id ="etc"> ist es, aber wenn es mehrere, es wird eine neue Zeile und 'stack' Sie.. ist es möglich, Sie nicht stapelbar, und gehen Sie einfach von Links nach rechts?
Dank

EDIT:

Demo : entfernt /

  • Ich bin verwirrt über deine Frage, in Ihrem demo, Sie wollen das Bild, sitzen unter den Benutzernamen, sondern Sie Fragen, wie Sie Sie nebeneinander
InformationsquelleAutor | 2012-05-17
  1. 16

    Haben Sie ein paar Optionen:

    #ranks li {
  float: left;
}

    Diese schwimmen alle Ihre Elemente der Liste auf der linken Seite, ohne Verpackung, bis der horizontale Platz auf dem Bildschirm ist nicht mehr verfügbar. Alternativ

    #ranks li {
  display: inline-block;
}

    Welches Ihrer Elemente, side-by-side, aber behandeln Sie Sie wie bock-level-Elemente. Wenn Sie kümmern sich nicht um block-level-styling, könnten Sie gehen mit gerade inline-display:

    #ranks li {
  display: inline;
}

    Welche Behandlung die Elemente der Liste wie alle anderen inline-Elemente (wie <span> oder <a>).

    Gibt es einige andere inhärente Stile, die vorhanden sind auf der Liste der Einzelteile, sowie deren Liste Eltern, dass Sie benötigen, zu tun, Weg mit. Werden Sie sicher, dass Sie margin, und padding.

    Demo: http://jsbin.com/iconud/edit#html,live

    Blicken Voraus!

    Finden Sie möglicherweise, dass es eine unschöne Lücke zwischen Ihre Liste posten, wenn Sie ' re positioniert, side-by-side. Dies ist ein häufiges problem mit inline-Listen. Eine Lösung ist das entfernen der newline Raum zwischen dem schließen und öffnen list-item-tags:

    <ul id="ranks"><li>
  Index</li><li>
  Contact</li><li>
  Portfolio</li>
</ul>

    Oder haben Sie alle inline, ein wenig weniger erkennbar:

    <ul id="ranks">
  <li>Index</li><li>Contact</li><li>Portfolio</li>
</ul>

    Dies ist ein wenig hart auf die Augen. Mit HTML, da die schließenden tags sind nicht immer erforderlich, Sie können auch lassen Sie das schließende tag (obwohl dies macht mich ein wenig nervös):

    <ul id="ranks">
  <li>Index
  <li>Contact
  <li>Portfolio
</ul>

    Mehrere Listen Inline Zu!

    Sich aus einigen OP ' s Kommentare, es scheint, Sie könnte versuchen erhalten nicht nur die Listenelemente inline, aber die Listen selbst. Wenn das der Fall ist, gelten die gleichen oben genannten Regeln für die Listen:

    #ranks,
#specs {
  margin: 0;
  padding: 0;
  display: inline-block;
}
#ranks li,
#specs li {
  display: inline-block;
  border: 1px solid #CCC;
  padding: 5px 10px;
}

    Waren auch hier wurden zwei Sätze von Regeln mit Selektoren, die Suche nach id ' s, und dann tags. Könnte man vereinfachen durch anwenden einer gemeinsamen Klasse an den Listen, oder durch die Eigenart, den Selektoren aus einer gemeinsamen übergeordneten element. Weiter ist die markup:

    <ul id="ranks">
  <li>Index</li>
  <li>Contact</li>
  <li>Portfolio</li>
</ul>

<ul id="specs">
  <li>Foo</li>
  <li>Bar</li>
</ul>

    Diese Ergebnisse in beiden Listen und deren Elemente angezeigt werden, die in einer horizontalen Mode.

    Demo: http://jsbin.com/iconud/2/edit

    • Man könnte auch css verwenden, Spalten, aber das unterstützt nur neuere Browser, und in manchen Fällen ist weniger flexibel, also float oder inline(-block) sind wohl die bessere Wahl
    • Das Beispiel auf Ihrer Seite bietet die besten test-Fall? Ich kann versuchen, direkt mit Ihrem code, um zu sehen, welche Lösung am besten funktioniert. Außerdem wollen Sie die ul Elemente, side-by-side zu?
    • Ich sehe nichts in Bezug auf "snorlax" oder "admin" oder "coder".
    • Okay, add display: inline-block zu #ranks.
    • Froh, dass ich helfen konnte. Bitte berücksichtigen Sie akzeptieren diese Antwort vervollständigen diese Frage, und die Auszeichnung der uns beide ansehen.
    InformationsquelleAutor Sampson
  2. 7

    mit einigen css -

     <style type="text/css">
 #ranks li { display:block; float:left; }
</style>
    • aktualisiert Kommentare: mit display:block
    • Das ist der Weg zu gehen, aber vergessen Sie nicht, klare float
    • hi, add display:block auch
    • aktualisiert die Antwort zu zeigen, wo
    • wenn Sie Frage ist, wie 'li' - Elemente von Links nach rechts, das ist Ihre Antwort. Wie viele andere beantwortet haben.
    InformationsquelleAutor Rob Sedgwick
  3. 1

    ul li{ display:inline;} den trick tun?

    • ya habe ein wenig faul mit der fehlenden id. Sollte so etwas wie #ranks li{display:inline;}
    InformationsquelleAutor Adam Sweeney
  4. 0

    <li> standardmäßig ist display:block;
    wenn Sie es display:inline; oder diplay:inline-block; sollte entfernen Sie den linebreak -

    InformationsquelleAutor barro32
  5. 0

    Dies ist ein grundlegendes Beispiel für die horizontale UL

    HTML

    <ul id="list">
    <li class="item">Item 1</li>
    <li class="item">Item 2</li>
    <li class="item">Item 3</li>
</ul>
<span class="clearFloats">

    CSS

    .item {
    float: left;
}

.clearFloats {
    clear: both;   
}

    JSFiddle Beispiel: http://jsfiddle.net/peterf/DEUBf/

    InformationsquelleAutor Peter Flannery
  6. 0

    Weitere option ist das festlegen der schriftart-size: 0 im ul, dann wiederherstellen Sie die gewünschte schriftart,-Größe, in die li-tags. Ich bevorzuge dieses, da es innerhalb der ul-tag, braucht keine weiteren hacks wie clear:both, und erklärt besser, was das styling ist gemeint (alles verstecken, was nicht in ein list item).

    ul {
    list-style-type: none;
    font-size: 0;
}
li {
    display: inline-block; /* Or inline, as you like */
    font-size: 16px;
}
    InformationsquelleAutor Maarten
Schreibe einen Kommentar