Text innerhalb eines Listenelements rechts ausrichten

Question

Ich habe eine verschachtelte ungeordnete Liste mit dem Hauptinhalt auf der linken Seite, und ich möchte Optionen hinzufügen, die nach rechts verschoben sind, so dass sie unabhängig von der Ebene der Einrückung rechts ausgerichtet sind.

<ul>
<li> Item 1 <span class='options'> link </span> </li>
<li> Item 2 <span class='options'> link </span>
  <ul>
    <li>Item 3 <span class='options'> link </span> </li>
  </ul>
</li>
</ul>

Ich habe das folgende css:

ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

li {
    padding-left: 15px;
    width: 400px;
}

.options {
    float: right;
    width: 50px;
}

In diesem Fall wird die Optionsspanne jedoch rechts ausgerichtet, aber 1 Zeile unterhalb der erwarteten Zeile.

Wie kann ich erreichen, dass die Optionsspanne mit dem Listenelement übereinstimmt?

TIA, Adam

Answer 1

Anstelle einer gleitenden Positionierung können Sie auch eine absolute Positionierung versuchen.

ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

li {
    padding-left: 15px;
    width: 400px;
    position: relative;
}

.options {
    width: 50px;
    position: absolute;
    right: 0px;
}

Answer 2

Verwendung dieses CSS:

ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

li {
    padding-left: 15px;
    width:400px;
}
.options {
    float: right;
    width: 50px;
}
li li { width:385px} 

Dies erfordert leider, dass Sie eine Breite abzüglich der Polsterung definieren. Je nach Flexibilität wird dies funktionieren. Getestet in Chrome 3.0.

Answer 3

Wenn die Änderung des HTML-Codes in Ordnung ist, könnten Sie "Item 1" in ein erstes Feld einschließen und:

• nach links verschieben (die Optionen werden weiterhin nach rechts verschoben)
• 使い道 display: inline-block auf beiden Spannweiten und text-align: right auf .options, anstelle von Floats (nicht kompatibel mit Fx2 aber, und nur in IE6/7, weil span ist ein Inline-Elemente standardmäßig. Würde nicht mit div funktionieren)