html - for - CSS fijo ancho en un tramo
style for title (9)
Bueno, siempre está el método de la 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 "rellenar" el texto? Es un trabajo ambiguo en este contexto.
Esto suena como una pregunta de tarea. ¿Espero que no estés tratando de que hagamos tu tarea por ti?
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 está renderizando con Courier New.
El objetivo es tener el texto después del tramo alineado.
The lazy dog.
AND The lazy cat.
OR The active goldfish.
La justificación de la "O" no es importante.
El texto del animal perezoso puede estar envuelto en un elemento adicional, pero tendré que verificarlo dos veces.
Desafortunadamente, los elementos en línea (o los elementos que tienen pantalla: en línea) 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 necesitas usar espacios y listas, así que necesitamos 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"> </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>
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, a excepción de FF2 e inferior.
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
La etiqueta <span> deberá configurarse para display:block ya que es un elemento en línea e ignorará el ancho.
asi que:
<style type="text/css"> span { width: 50px; display: block; } </style>
y entonces:
<li><span> </span>something</li>
<li><span>AND</span>something else</li>
Las personas que abarcan en este caso no pueden ser un elemento de bloque porque el resto del texto entre los elementos li bajará. También usar float es una muy mala idea porque necesitará establecer el ancho para todo el elemento li y este ancho deberá ser el mismo que el ancho de todo el elemento u otro contenedor.
Intenta 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
así, cuando el elemento li es relativo, formatea el elemento span para que sea absoluto y en la parte superior: 0; izquierda: 0; por lo tanto, se mantiene en la parte superior izquierda y establece el relleno a la izquierda (o: relleno: 0px 0px 0px 80px;) para configurar este espacio libre para el elemento span.
Debería funcionar mejor para casos simples.
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, porque cambia la línea en cada opción. Sin embargo, espero que esto te ayude a acercarte más a la respuesta.
prueba esto
> <span class="input-group-addon" style="padding-left:6%;
> padding-right:6%; width:150px; overflow: auto;">
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>
Como dijo Eoin, debes poner un espacio que no se rompa en tus tramos "vacíos", pero no puedes asignar un ancho a un elemento en línea, solo relleno / margen, así que tendrás que hacer que flote para que puedas dale un ancho
Para ver un ejemplo de jsfiddle, consulte http://jsfiddle.net/laurensrietveld/JZ2Lg/
<style type="text/css">
span {
position:absolute;
width: 50px;
}
</style>
Puede hacer este método para asignar ancho a los elementos en línea