web-dev-qa-db-fra.com

Bloc d'affichage sans largeur 100%

Je souhaite définir un élément span devant apparaître sous un autre élément à l'aide de la propriété display. J'ai essayé d'appliquer inline-block mais sans succès, et je me suis dit que je pourrais utiliser block si je réussissais à éviter d'attribuer à 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 dans laquelle je souhaite définir un lien "lire plus" à la fin de chaque message (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, appliquer

li {
    clear: both;
}
li a {
    display: block;
    float: left;
    clear: both;
}
htmlwidthblockcss
78
Staffan Estberg

Si je comprends bien votre question, le CSS suivant va flotter en dessous des étendues et l'empêcher d'avoir une largeur de 100%:

a {
    display: block; 
    float: left; 
    clear: left; 
}
62
PJ McCormick

Utilisation display: table.

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

136
ha404

vous pouvez utiliser:

width: max-content;

Remarque: le support est limité, cochez ici pour une liste complète des navigateurs supportés

17
Mustafa J

Je garderais chaque rangée à son propre div, alors ...

<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.

7
George

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

Au lieu de display:block; utilisation display:inline-block;

4
Renske

Essaye ça:

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

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

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

.child {
  display: block;
}

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

sans "espace-blanc: nowrap":

enter image description here

avec "white-space: nowrap":

enter image description here

edit: il semble que cela fonctionne également sans la partie de bloc enfant pour moi, donc cela semble bien fonctionner.

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

Ne pouvez-vous pas définir l'envergure comme display: block et définir un width sur l’élément contenant li?

0
Jon Hudson