Ancho fijo CSS en un lapso

381

Dentro de una lista desordenada:

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

Se permite agregar un atributo de clase o estilo, pero no se permite rellenar el texto y agregar o cambiar etiquetas.

La página se procesa con Courier New.

El objetivo es alinear el texto después del lapso.

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

La justificación de la "OR" no es importante.

El texto animal perezoso puede estar envuelto en un elemento adicional, pero tendré que verificarlo dos veces.

html css jason saldo
fuente

Respuestas:

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>
Expandir fragmento

Como dijo Eoin, debe poner un espacio que no se rompa en sus tramos "vacíos", pero no puede asignar un ancho a un elemento en línea, solo relleno / margen, por lo que deberá hacer que flote para que pueda dale un ancho.

Para ver un ejemplo de jsfiddle, consulte http://jsfiddle.net/laurensrietveld/JZ2Lg/

Stephen Caldwell
fuente
1
<span> es un elemento en línea por defecto, y flotando no le dará un ancho.
codeinthehole
56
La propiedad flotante genera un "cuadro de bloque" que tiene un ancho.
Stephen Caldwell el
83
Debe ser diplay: inline-block; width: 32px;lo hará en la mayoría de los navegadores modernos.
Paulo Bueno
2
@Randy Marsh: no, la propiedad de ancho solo tiene un efecto porque la propiedad flotante cambia el elemento a una visualización de bloque, como Stephen Caldwell describe anteriormente.
codeinthehole
14
@PauloBueno, ¿puedes cambiar diplaypara leer display, por cierto, funciona para mí. gracias
basarat
507

En un mundo ideal lo lograrías simplemente usando el siguiente CSS

<style type="text/css">

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

</style>

Esto funciona en todos los navegadores, excepto FF2 y versiones inferiores.

Firefox 2 y versiones anteriores no admiten este valor. Puede usar -moz-inline-box, pero tenga en cuenta que no es lo mismo que inline-block, y puede que no funcione como espera en algunas situaciones.

Cita tomada de quirksmode

codeinthehole
fuente
1
@NicholasPickering .. ¿qué tal wkhtmltopdf?
codeinthehole
Hm, no estoy seguro. Es solo un pequeño revés. Terminé teniendo que usar tablas para obtener el efecto deseado.
Nicholas Pickering
Bueno, puedo recomendar wkhtmltopdf si alguna vez necesitas algo que cumpla con CSS3.
codeinthehole
77
Mientras tanto, 10 años después, este es definitivamente el camino a seguir.
vog
19

Desafortunadamente, los elementos en línea (o elementos que tienen display: inline) ignoran la propiedad de ancho. Deberías usar divs flotantes en su lugar:

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

Ahora veo que necesita usar espacios y listas, por lo que debemos reescribir esto un poco:

<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
fuente
3
Esa es una gran solución. Los div flotantes imitan el comportamiento previsto de los tramos a medida que se alinean horizontalmente. Es importante recordar lo claro: ambos saltos de línea. Es una excelente manera de evitar tablas en este contexto.
artur
No entiendo, el botón está en línea o elemento de bloque en línea, ¿por qué se aplicará "ancho"? El botón parece un elemento en línea ¿verdad? ¿Hay algún documento que muestre las propiedades de "visualización" predeterminadas de todos los elementos html?
GMsoF
14

La <span>etiqueta deberá establecerse display:blockya que es un elemento en línea e ignorará el ancho.

entonces:

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

y entonces:

<li><span>&nbsp;</span>something</li>
<li><span>AND</span>something else</li>
Aaron Powell
fuente
No, no creo que esto funcione. "algo" va a la siguiente línea. Y falta un "<"
user1537366
Como dije, ¡NO funciona! Verifique jsfiddle.net/m156a0qp . Además, ¡nunca es bueno entrometerse con el CSS de todos los elementos span!
user1537366
4 
<style type="text/css">

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

</style>

Puede hacer este método para asignar ancho para elementos en línea

Augustus Francis
fuente
2

Las personas abarcan en este caso no pueden ser un elemento de bloque porque el resto del texto entre los elementos li se reducirá. También es muy mala idea usar float porque necesitará establecer el ancho para todo el elemento li y este ancho deberá ser el mismo que el ancho del elemento ul completo u otro contenedor.

Pruebe algo como esto 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>

y en el 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

entonces, cuando el elemento li es relativo, formatea el elemento span para que sea absoluto y en la parte superior: 0; izquierda: 0; para que permanezca en la parte superior izquierda y establezca el margen izquierdo (o: padding: 0px 0px 0px 80px;) para establecer este espacio libre para el elemento span.

Debería funcionar mejor para casos simples.

Arturro
fuente
1

prueba esto 

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

Usando HTML 5.0, es posible arreglar el ancho del bloque de texto usando <span>o <div>.

ingrese la descripción de la imagen aquí

Para <span>, lo que es importante es agregar la siguiente línea CCS

display: inline-block;

Para su vacío, <span>lo importante es agregar &nbsp;espacio.

Mi código está siguiendo

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>
Expandir fragmento

PD: ¡He definido la tabclase porque ul li spanel selector CSS no funciona en mi PC!

Schlebe
fuente
insertando un & nbsp; fue lo que funcionó para mí!
Adrien le coarer
0

Puedes hacerlo usando una tabla, pero no es CSS puro.

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

Tenga en cuenta que no se muestra exactamente como desea, ya que cambia de línea en cada opción. Sin embargo, espero que esto te ayude a acercarte a la respuesta.

luiscubal
fuente
-1

Bueno, siempre existe el método de fuerza bruta:

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

¿O es eso lo que quisiste decir con "relleno" del texto? Ese es un trabajo ambiguo en este contexto.

Esto suena como una pregunta de tarea. ¿Espero que no estés tratando de hacer que hagamos tu tarea por ti?

eaolson
fuente
-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>
Expandir fragmento

Pepe Unodostres
fuente