Largeur fixe CSS dans une étendue

381

Dans une liste non ordonnée:

<li><span></span> The lazy dog.</li>
<li><span>AND</span> The lazy cat.</li>
<li><span>OR</span> The active goldfish.</li>

L'ajout d'un attribut de classe ou de style est autorisé mais le remplissage du texte et l'ajout ou la modification de balises ne sont pas autorisés.

La page s'affiche avec Courier New.

Le but est d'aligner le texte après la durée.

    The lazy dog.
AND The lazy cat.
OR  The active goldfish.

La justification du "OU" est sans importance.

Le texte animal paresseux peut être enveloppé dans un élément supplémentaire, mais je devrai vérifier à nouveau.

html css

— Jason Saldo
source

427

ul {
  list-style-type: none;
  padding-left: 0px;
}

ul li span {
  float: left;
  width: 40px;
}

<ul>
  <li><span></span> The lazy dog.</li>
  <li><span>AND</span> The lazy cat.</li>
  <li><span>OR</span> The active goldfish.</li>
</ul>

Développer l'extrait

Comme l'a dit Eoin, vous devez mettre un espace insécable dans vos étendues "vides", mais vous ne pouvez pas attribuer une largeur à un élément en ligne, uniquement un remplissage / une marge, vous devrez donc le faire flotter pour que vous puissiez donnez-lui une largeur.

Pour un exemple jsfiddle, voir http://jsfiddle.net/laurensrietveld/JZ2Lg/

— Stephen Caldwell
source

1

est un élément en ligne par défaut - et le faire flotter ne lui donnera pas de largeur.

— codeinthehole

56

La propriété float génère une "boîte de bloc" qui a une largeur.

— Stephen Caldwell

83

Devrait-il diplay: inline-block; width: 32px;le faire dans la plupart des navigateurs modernes.

— Paulo Bueno

2

@Randy Marsh - non, la propriété width n'a d'effet que parce que la propriété float change l'élément en affichage de bloc, comme Stephen Caldwell le décrit ci-dessus.

— codeinthehole

14

@PauloBueno pouvez-vous changer diplaypour lire display, BTW, cela fonctionne pour moi. merci

— basarat

507

Dans un monde idéal, vous réaliseriez cela simplement en utilisant les css suivants

<style type="text/css">

span {
  display: inline-block;
  width: 50px;
}

</style>

Cela fonctionne sur tous les navigateurs à l'exception de FF2 et inférieurs.

Firefox 2 et versions inférieures ne prennent pas en charge cette valeur. Vous pouvez utiliser -moz-inline-box, mais sachez que ce n'est pas la même chose que inline-block, et cela peut ne pas fonctionner comme prévu dans certaines situations.

Citation tirée de quirksmode

— code dans le trou
source

1

@NicholasPickering .. que diriez-vous de wkhtmltopdf?

— code dans

Hm, pas sûr. Ce n'est qu'un revers mineur. J'ai fini par devoir utiliser des tableaux pour obtenir l'effet souhaité.

— Nicholas Pickering

Eh bien, je peux recommander wkhtmltopdf si vous avez besoin de quelque chose qui est compatible CSS3.

— code dans

7

Pendant ce temps, 10 ans plus tard, c'est définitivement la voie à suivre.

— vog

19

Malheureusement, les éléments inline (ou les éléments ayant display: inline) ignorent la propriété width. Vous devriez plutôt utiliser des divs flottants:

<style type="text/css">
div.f1 { float: left; width: 20px; }
div.f2 { float: left; }
div.f3 { clear: both; }
</style>

<div class="f1"></div><div class="f2">The Lazy dog</div><div class="f3"></div>
<div class="f1">AND</div><div class="f2">The Lazy cat</div><div class="f3"></div>
<div class="f1">OR</div><div class="f2">The active goldfish</div><div class="f3"></div>

Maintenant, je vois que vous devez utiliser des étendues et des listes, nous devons donc réécrire un peu ceci:

<html><head>
<style type="text/css">
        span.f1 { display: block; float: left; clear: left; width: 60px; }
    li { list-style-type: none; }
    </style>

</head><body>
<ul>
<li><span class="f1">&nbsp;</span>The lazy dog.</li>
<li><span class="f1">AND</span> The lazy cat.</li>
<li><span class="f1">OR</span> The active goldfish.</li>
</ul>
</body>
</html>

— Tamas Czinege
source

3

Voilà une excellente solution. Les diviseurs flottants imitent le comportement prévu des travées lorsqu'elles s'alignent horizontalement. Il est important de se rappeler le clair: les deux sauts de ligne. C'est un excellent moyen d'éviter les tableaux dans ce contexte.

— artur

Je ne comprends pas, le bouton est un élément en ligne ou en bloc, pourquoi la "largeur" s'y appliquera? Le bouton semble être un élément en ligne non? Existe-t-il un document montrant les propriétés "d'affichage" par défaut de tous les éléments html?

— GMsoF

14

La balise devra être définie sur display:blockcar il s'agit d'un élément en ligne et ignorera la largeur.

donc:

<style type="text/css"> span { width: 50px; display: block; } </style>

et alors:

<li><span>&nbsp;</span>something</li>
<li><span>AND</span>something else</li>

— Aaron Powell
source

Non, je ne pense pas que cela fonctionne. "quelque chose" va à la ligne suivante. Et il manque un "<"

— user1537366

Comme je l'ai dit, cela ne fonctionne PAS! Consultez jsfiddle.net/m156a0qp . De plus, il n'est jamais bon de se mêler du CSS de tous les éléments span!

— user1537366

4

<style type="text/css">

span {
  position:absolute;
  width: 50px;
}

</style>

Vous pouvez utiliser cette méthode pour affecter la largeur des éléments en ligne

— Auguste François
source

2

Dans ce cas, les gens ne peuvent pas être un élément de bloc car le reste du texte entre les éléments li descendra. L'utilisation de float est également une très mauvaise idée car vous devrez définir la largeur de l'élément li entier et cette largeur devra être la même que la largeur de l'élément ul entier ou d'un autre conteneur.

Essayez quelque chose comme ça en html:

<li><span></span><strong>The</strong> lazy dog.</li>
<li><span>AND</span> <strong>The</strong> lazy cat.</li>
<li><span>OR</span>  <strong>The</strong> active goldfish.</li>

et dans le css

li {position:relative;padding-left:80px;} // 80px or something else
li span {position:absolute;top:0;left:0;}
li strong {color:red;} // red or else

ainsi, lorsque l'élément li est relatif, vous formatez l'élément span pour qu'il soit absolu et en haut: 0; gauche: 0; il reste donc en haut à gauche et vous définissez le padding-left (ou: padding: 0px 0px 0px 80px;) pour définir cet espace libre pour l'élément span.

Cela devrait fonctionner mieux pour les cas simples.

— Arturro
source

1

essaye ça

> <span class="input-group-addon" style="padding-left:6%;
> padding-right:6%; width:150px; overflow: auto;">

— Rahmad Saleh
source

1

En utilisant HTML 5.0, il est possible de fixer la largeur du bloc de texte en utilisant ou <div>.

Pour , l'important est d'ajouter la ligne CCS suivante

display: inline-block;

Pour votre vide ce qui est important c'est d'ajouter de l'  espace.

Mon code suit

body
	{
	font-family: Arial;
	font-size:20px;
	}

div
	{
	width:200px;
	font-size:80px;
	background-color: lime;
	}
div span
	{
	display:block;
	width:200px;
	background-color: lime;
	}

ul li span
	{
	display: inline-block;
	width: 80px;
	background-color: yellow;
	}
span.tab
	{
	display: inline-block;
	width: 80px;
	background-color: yellow;
	}

&lt;DIV&gt;

<div class='test'>ABCDEF</div>

&lt;SPAN&gt;

<div>
    <span class='test'>ABCDEF</span>
</div

<br>

<ul>
  <li><span class='tab'>&nbsp;</span> The lazy dog.</li>
  <li><span class='tab'>AND</span> The lazy cat.</li>
  <li><span class='tab'>OR</span> The active goldfish.</li>
</ul>

Développer l'extrait

PS: J'ai défini une tabclasse car le ul li spansélecteur CSS ne fonctionne pas sur mon PC!

— schlebe
source

insertion d'un & nbsp; c'est ce qui a fonctionné pour moi!

— adrien le coarer

0

Vous pouvez le faire en utilisant une table, mais ce n'est pas du CSS pur.

<style>
ul{
    text-indent: 40px;
}

li{
    list-style-type: none;
    padding: 0;
}

span{
    color: #ff0000;
    position: relative;
    left: -40px;
}
</style>


<ul>
<span></span><li>The lazy dog.</li>
<span>AND</span><li>The lazy cat.</li>
<span>OR</span><li>The active goldfish.</li>
</ul>

Notez qu'il ne s'affiche pas exactement comme vous le souhaitez, car il commute la ligne sur chaque option. Cependant, j'espère que cela vous aidera à vous rapprocher de la réponse.

— luiscubal
source

-1

Eh bien, il y a toujours la méthode de la force brute:

<li><pre>    The lazy dog.</pre></li>
<li><pre>AND The lazy cat.</pre></li>
<li><pre>OR  The active goldfish.</pre></li>

Ou est-ce ce que vous vouliez dire par "remplissage" du texte? C'est un travail ambigu dans ce contexte.

Cela ressemble un peu à une question de devoirs. J'espère que vous n'essayez pas de nous faire faire vos devoirs pour vous?

— eaolson
source

-1

ul {
	list-style-type: none;
	padding-left: 0px;
}

ul li span { 
	float: left;
	width: 40px;
}

<ul>
    <li><span></span> The lazy dog.</li>
    <li><span>AND</span> The lazy cat.</li>
    <li><span>OR</span> The active goldfish.</li>
</ul>

Développer l'extrait

— Pepe Unodostres
source