Richten Sie einige Texte in einer sortierten CSS-Liste rechts aus.

Ich versuche eine nummerierte Liste von Strings zu erstellen, bei denen ich am Ende der rechts liegenden Zeichenfolge einen Wert hinzufügen muss. Ich habe die folgende Frage gefunden (Right align some text within a list item) und das funktioniert, bis der Text gerade nicht groß genug ist, um einen Wrap zu erzwingen. Der nach rechts schwebende Text überlappt den Text.Richten Sie einige Texte in einer sortierten CSS-Liste rechts aus.

Abgespeckte HTML:

<div class="container"> 
    <ol class="top3"> 
    <li>Short name<span class="top3-value">10%</span></li> 
    <li>Very very long long long name<span class="top3-value">12%</span></li> 
    <li>Very very long long longlonglongname<span class="top3-value">12%</span></li> 
    </ol> 
</div>

Der Behälter, top3 und Top3-Wertklassen sind definiert als (LESS-Syntax):

.container { 
    width: 175px; 
} 

ol.top3 { 
    margin: 0; 
    padding: 0; 
    counter-reset: item; 
    list-style: none; 
    border-top: 1px solid #AEAEAE; 

    li { 
    position: relative; 
    margin: 0 0 6px 0; 
    padding: 10px 8px 10px 2em; 
    list-style: none; 
    border-bottom: 1px solid #AEAEAE; 

    span.top3-value { 
     padding-left: 1em; 
     position: absolute; 
     right: 0; 
     font-weight: 700; 
    } 
    } 
}

dieses Beispiel Siehe: http://codepen.io/kdbruin/pen/xVyEya

Die Die Breite des Containers ist so festgelegt, dass sich das Problem manifestiert. Auf meiner Webseite kann die Breite variieren und wird durch andere Elemente auf der Seite bestimmt.

Ich habe versucht, einen display: block zu der Top3-Wert-Klasse hinzuzufügen, aber dies wird immer den Wert unter dem Text, auch wenn es genug Platz, um es nach rechts zu setzen zwingen. Außerdem wird der Wert durch die Trennlinien angezeigt.

Ähnliche Ergebnisse werden angezeigt, wenn anstelle der absoluten Positionierung des Werts float: right verwendet wird.

Irgendwelche Vorschläge?

Quelle

2016-04-28 Kees de Bruin

Wie ist das? http: // Codepen.io/anon/pen/KzGNBB – Pete

@Pete Danke für die Alternative, aber ich habe dies bereits als eine Lösung für unseren Kunden vorgeschlagen, aber er lehnte es ab. Die willkürlichen Wortbrüche waren für ihn keine angemessene Lösung. –

In diesem Fall können Sie dem Container keine feste Breite zuweisen: http://codepen.io/anon/pen/XdxpNb. Aber wenn Ihr Container jemals kleiner als Ihr längstes Wort wird - ohne Wortumbruch, werden Sie immer überlappend kommen, also akzeptiert Ihr Client überlappende Wörter oder Wortumbruch – Pete

Die Wortbruch Schwierigkeiten meines Klienten waren ein wenig übertrieben und diese mich auf die verschiedenen Kommentare und Antworten basieren auf der folgenden Lösung führen.

das Listenelement Hergestellt ein Flexbox
Added eine zusätzliche Spanne für den Top3-Namen mit flex-grow: 1
Verwenden overflow: hidden beliebigen Text abzuschneiden, die zu lang ist in der Box zu passen. Das war akzeptabel und stellt richtige Pausen zwischen den Wörtern

Relevante Änderungen in der CSS:

ol.top3 li { 
    display: flex; 
    flex-direction: row; 
} 

ol.top3 li span.top3-name { 
    flex-grow: 1; 
    display: block; 
    overflow: hidden; 
} 

ol.top3 li span.top3-value { 
    display: block; 
    padding-left: 1em; 
    font-weight: 700; 
}

Ich habe ein Update Stift erstellt: http://codepen.io/kdbruin/pen/qZJrYM

Quelle

2016-04-28 12:43:20

Wenn Sie in der Lage kann die Breite der Container-Klasse zu ändern, können Sie

Breite setzen: auto;

Damit es bis zum Ende des Bildschirms erweitert wird. Alle dynamischen Werte können hier unterbringen.

Quelle

2016-04-28 10:16:57 Suraj

Wie in den Kommentaren zur Frage selbst gesagt, ist die Breite bereits dynamisch, aber durch das umgebende Layout eingeschränkt. Der 175px ist ungefähr so groß wie er wird. –

CSS-Tabellen und word-break, um jeden wirklich langen Text zu brechen, könnte eine Option sein.

Ich habe den Text des Listenelements in eine Spanne gepackt, um die Steuerung und Auswahl zu verbessern.

.container { 
 
    width: 175px; 
 
    background: pink; 
 
} 
 
ol.top3 { 
 
    margin: 0; 
 
    padding: 0; 
 
    counter-reset: item; 
 
    list-style: none; 
 
    border-top: 1px solid #AEAEAE; 
 
} 
 
ol.top3 li { 
 
    position: relative; 
 
    margin: 0 0 6px 0; 
 
    padding: 10px 8px 10px 2em; 
 
    list-style: none; 
 
    border-bottom: 1px solid #AEAEAE; 
 
    display: table; 
 
} 
 
ol.top3 li:before { 
 
    content: counter(item); 
 
    counter-increment: item; 
 
    position: absolute; 
 
    left: 0; 
 
    box-sizing: border-box; 
 
    width: 1.5em; 
 
    margin-right: 8px; 
 
    padding: 4px; 
 
    border-radius: 50%; 
 
    color: #FFFFFF; 
 
    background: #444444; 
 
    line-height: 14px; 
 
    font-size: 14px; 
 
    font-weight: 400; 
 
    text-align: center; 
 
} 
 
ol.top3 li span { 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
} 
 
ol.top3 li span:first-of-type { 
 
    word-break: break-all; 
 
    width: 100%; 
 
} 
 
ol.top3 li span.top3-value { 
 
    padding-left: 1em; 
 
    font-weight: 700; 
 
}

<div class="container"> 
 
    <ol class="top3"> 
 
    <li><span>Short name</span><span class="top3-value">10%</span> 
 
    </li> 
 
    <li><span>Very very long long long name</span><span class="top3-value">12%</span> 
 
    </li> 
 
    <li><span>Very very long long longlonglongnamelonglong</span><span class="top3-value">12%</span> 
 
    </li> 
 
    </ol> 
 
</div>

Quelle

2016-04-28 10:57:47

Richten Sie einige Texte in einer sortierten CSS-Liste rechts aus.

Antwort

Verwandte Themen