Wie kann ich jedes dieser Elemente zu neuen Zeilen unterbrechen, aber behalten sie als display = inline und ohne br Tags?CSS: Verursacht Zeilenumbrüche für Inline-Elemente ohne <br />
<div>
<a href="element1">Element 1</a>
<a href="element1">Element 2</a>
<a href="element1">Element 3</a>
</div>
Sie können dies tun, indem gleich width für die Mutter <div> und die <a> definieren. vorausgesetzt, Sie eine Klasse ‚Container‘ auf die <div>
.container { width: 100px; }
a { width: 100px; display: inline; }
Legen Sie sie in eine ungeordnete Liste?
nicht sicher, ob ich wirklich verstehen, was Sie nach dem hier sind ...
Wenn Sie nicht verstehen, antworten Sie nicht. – deathlock
<style type="text/css">
div.probablyShouldPutAClassName a {
display: block;
}
</style>
Dies kann getan werden, aber für alle Browser nicht funktionieren. Sie müssen das Pseudoelement :after mit white-space und content verwenden. Wie so
<html>
<head>
<style type="text/css">
div a:after {white-space: pre;content:'\A';}
</style>
</head>
<body>
<div>
<a href="element1">Element 1</a>
<a href="element1">Element 2</a>
<a href="element1">Element 3</a>
</div>
</body>
</html>
Fünf Jahre später ist die Browserkompatibilität kein Problem mehr, aber es ist immer noch keine universelle Lösung, da es Elemente gibt, die keine :: before oder :: after Pseudoelemente haben - z. ''. – wortwart
Für das Blockelement gelten nicht die ganze Zeile einnehmen, setzen Sie ihn auf etwas Breite ist wollen klein und die white-space:nowrap
label
{
width:10px;
display:block;
white-space:nowrap;
}
Warum würden Sie sie machen Inline-Elemente, aber haben Zeilenumbrüche nach ihnen? Das ist so ziemlich die Definition des Unterschieds zwischen Blockelementen und Inline-Elementen. –
Nein, der Unterschied zwischen Block- und Inline-Elementen ist subtiler. –
Ich denke, er möchte sie auf andere Zeilen setzen, und er darf das CSS ändern, aber nicht das HTML. –