Anzeigeblock ohne 100% Breite

93

Ich möchte mithilfe der display-Eigenschaft festlegen, dass ein span-Element unter einem anderen Element angezeigt wird. Ich habe versucht, Inline-Block anzuwenden, aber ohne Erfolg, und dachte, ich könnte Block verwenden, wenn ich es irgendwie schaffen würde, dem Element keine Breite von 100% zu geben (ich möchte nicht, dass sich das Element "ausdehnt"). Kann dies getan werden oder wenn nicht, was ist eine gute Praxis, um diese Art von Problem zu lösen?

Beispiel: Eine Nachrichtenliste, in der ich am Ende jedes Beitrags einen Link "Mehr lesen" setzen möchte (Hinweis: <a>statt <span>)

<li>
<span class="date">11/15/2012</span>
<span class="title">Lorem ipsum dolor</span>
<a class="read-more">Read more</a> 
</li>

Update: Gelöst. In CSS anwenden

li {
    clear: both;
}
li a {
    display: block;
    float: left;
    clear: both;
}

— Staffan Estberg
quelle

1

Haben Sie ein Markup (HTML oder CSS), das Sie uns zeigen können? Es ist schwierig, an dem Problem zu arbeiten, ohne etwas zu bearbeiten. Auch eine Demo auf jsfiddle wäre gut.

— Tom Oakley

Ich dachte, ich brauche keinen Beispielcode, da es nur darum geht, ein span-Element zu positionieren. Siehe aktualisierten Beitrag.

— Staffan Estberg

Sie können das gesamte Markup ernsthaft reduzieren, indem Sie nur eine Codezeile verwenden, wie unten erwähnt.

— ha404

71

Wenn ich Ihre Frage richtig verstehe, schwebt das folgende CSS Ihr a unter den Bereichen und verhindert, dass es eine Breite von 100% hat:

a {
    display: block; 
    float: left; 
    clear: left; 
}

— PJ McCormick
quelle

Ich habe versucht, dies anzuwenden, aber da die Span-Elemente (Titel und Datum im Beispiel) kein Float haben, wird der Link vor dem letzten Span positioniert. Vermutlich besteht eine Lösung darin, alle untergeordneten Elemente im Li schweben zu lassen.

— Staffan Estberg

Dies funktioniert, wenn ich einen Clearfix für das übergeordnete Element anwende. Wird mit dieser Lösung gehen, danke PJ.

— Staffan Estberg

156

Verwenden Sie display: table.

Diese Antwort muss aus mindestens 30 Zeichen bestehen. Ich habe 20 eingegeben, also hier noch ein paar.

— ha404
quelle

13

Geniale Lösung. margin: 0 auto;wenn Sie es zentriert brauchen.

— Mafia

4

Ich finde dich großartig.

— Billynoah

1

display: table;funktioniert, akzeptiert aber keine Polsterung.

— Donquijote

@ ha404 du hast recht, Polsterung funktioniert! jsfiddle.net/wgj7xvLe/4 zumindest in meinem Browser (Chromium).

— Donquijote

3

@donquixote sollte das Auffüllen akzeptieren, solange Sie den Randkollaps verwenden: getrennt. hatte gerade dieses Problem.

— Brad

29

Sie können verwenden:

width: max-content;

Hinweis: Die Unterstützung ist begrenzt. Hier finden Sie eine vollständige Aufschlüsselung der unterstützenden Browser

— Mustafa J.
quelle

Ich hatte noch nie davon gehört! Interessant.

— Ryan

War gut seit Chrome 46 und FF 66. Sollte als Antwort akzeptiert werden. inline-blocket al haben mein Layout gebrochen.

— i336_

1

@ i336_ Bis heute wird es vom Edge-Browser noch nicht unterstützt.

— ChrisW

Edge oder Chromium Edge? (Um klar zu sein; Ersteres wird für eine Weile

— ausfallen

7

Ich würde jede Zeile für sich behalten, also ...

<div class="row">
    <div class="cell">Content</div>
</div>
<div class="row">
    <div class="cell">Content</div>
</div>

Und dann zum CSS:

.cell{display:inline-block}

Es ist schwierig, eine Lösung zu finden, ohne Ihren Originalcode zu sehen.

— George
quelle

1

Danke, aber ich würde es vorziehen, keine div-Elemente einzumischen.

— Staffan Estberg

5

Nochmals: Eine Antwort, die vielleicht etwas zu spät ist (aber für diejenigen, die diese Seite sowieso für die Antwort finden).

Anstelle von display:block;Gebrauchdisplay:inline-block;

— Renske
quelle

2

Versuche dies:

li a {
    width: 0px;
    white-space:nowrap;
}

— Roberto
quelle

1

Ich hatte dieses Problem, ich habe es so gelöst:

.parent {
  white-space: nowrap;
  display: table;
}

.child {
  display: block;
}

Der "Leerraum: Nowrap" stellt sicher, dass die Kinder des Kindes (falls vorhanden) nicht in eine neue Zeile umbrechen, wenn nicht genügend Platz vorhanden ist.

ohne "Leerraum: Nowrap":

mit "white-space: nowrap":

edit: es scheint, dass es auch nur ohne den untergeordneten Blockteil für mich funktioniert, also scheint nur dies gut zu funktionieren.

.parent {
  white-space: nowrap;
  display: table;
}

— Anfänger
quelle

0

Können Sie nicht einfach die Spanne als display: blockund eine widthfür das enthaltende liElement festlegen ?

— Jon Hudson
quelle

1

Das li muss aufgrund der Titel- und Datumsbereiche automatisch haben.

— Staffan Estberg

0

Sie können Folgendes verwenden:

display: inline-block;

Funktioniert gut bei Links und anderen Elementen.

— Bruno Leveque
quelle