Bloc d'affichage sans largeur de 100%

95

Je souhaite définir un élément span pour qu'il apparaisse sous un autre élément à l'aide de la propriété display. J'ai essayé d'appliquer inline-block mais sans succès, et j'ai pensé que je pourrais utiliser block si je réussissais à éviter de donner à l'élément une largeur de 100% (je ne veux pas que l'élément «s'étire»). Cela peut-il être fait, ou sinon, quelle est la bonne pratique pour résoudre ce genre de problème?

Exemple: une liste d'actualités où je veux mettre un lien "en savoir plus" à la fin de chaque article (note: <a>au lieu de <span>)

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

Mise à jour: résolu. En CSS, appliquez

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

— Staffan Estberg
source

1

Avez-vous des balises (HTML ou CSS) à nous montrer? Il est difficile de travailler sur le problème sans rien sur quoi travailler. Une démo sur jsfiddle serait également bonne.

— Tom Oakley

Je pensais que je n'avais besoin d'aucun exemple de code car il s'agissait simplement de positionner un élément span. Voir le post mis à jour.

— Staffan Estberg

Vous pouvez sérieusement réduire tout ce balisage en n'utilisant qu'une seule ligne de code, comme je l'ai mentionné ci-dessous.

— ha404

72

Si je comprends bien votre question, le CSS suivant fera flotter votre a sous les travées et l'empêchera d'avoir une largeur de 100%:

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

— PJ McCormick
source

J'ai essayé d'appliquer cela, mais comme les éléments span (titre et date, dans l'exemple) n'ont pas de flotteur, le lien est positionné avant le dernier span. Je suppose qu'une solution serait de faire en sorte que tous les éléments enfants du li float.

— Staffan Estberg

Cela fonctionne si j'applique un clearfix pour le parent li. Va avec cette solution, merci PJ.

— Staffan Estberg

157

Utilisez display: table.

Cette réponse doit comporter au moins 30 caractères; Je suis entré 20, alors voici quelques autres.

— ha404
source

13

Solution Genius. margin: 0 auto;si vous en avez besoin centré.

— Mafia

4

Je pense que tu es génial.

— billynoah

1

display: table;fonctionne, mais n'accepte aucun remplissage.

— donquixote le

@ ha404 vous avez raison, le rembourrage fonctionne! jsfiddle.net/wgj7xvLe/4 au moins dans mon navigateur (Chromium).

— donquixote le

3

@donquixote il devrait accepter le remplissage tant que vous utilisez border-collapse: séparé. juste eu ce problème.

— Brad le

30

vous pouvez utiliser:

width: max-content;

Remarque: le support est limité, vérifiez ici pour une ventilation complète des navigateurs pris en charge

— Mustafa J
source

Je n'avais jamais entendu parler de ça! Intéressant.

— Ryan

Était bon depuis Chrome 46 et FF 66. Devrait être une réponse acceptée. inline-blocket al cassait ma mise en page.

— i336_

1

@ i336_ À ce jour, il n'est toujours pas pris en charge par le navigateur Edge.

— ChrisW

Edge ou Chromium Edge? (Pour être clair; le premier va être en transition pendant un certain temps ...)

— i336_

7

Je garderais chaque ligne dans sa propre division, donc ...

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

Et puis pour le CSS:

.cell{display:inline-block}

Il est difficile de vous donner une solution sans voir votre code d'origine.

— George
source

1

Merci, mais je préfère ne pas mélanger d'éléments div.

— Staffan Estberg

5

Encore une fois: une réponse qui pourrait être un peu trop tardive (mais pour ceux qui trouvent cette page pour la réponse de toute façon).

Au lieu d' display:block;utiliserdisplay:inline-block;

— Renske
source

2

Essaye ça:

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

— Roberto
source

1

J'ai eu ce problème, je l'ai résolu comme ceci:

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

.child {
  display: block;
}

le "white-space: nowrap" s'assure que les enfants de l'enfant (s'il en a) ne passent pas à une nouvelle ligne s'il n'y a pas assez d'espace.

sans "white-space: nowrap":

avec "white-space: nowrap":

edit: il semble que cela fonctionne aussi simplement sans la partie de bloc enfant pour moi, donc cela semble fonctionner correctement.

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

— Noob
source

0

Vous pouvez utiliser les éléments suivants:

display: inline-block;

Fonctionne bien sur les liens et autres éléments.

— Bruno Leveque
source