it-swarm-es.tech

Cómo insertar saltos de línea en documentos HTML usando CSS

Estoy escribiendo un servicio web y quiero devolver los datos como XHTML. Debido a que son datos, no marcas, quiero mantenerlos muy limpios, sin extras <div>s o <span>s. Sin embargo, para conveniencia de los desarrolladores, también me gustaría que los datos devueltos sean legibles razonablemente en un navegador. Para hacerlo, creo que una buena manera de hacerlo sería usar CSS.

Lo que específicamente quiero hacer es insertar saltos de línea en ciertos lugares. Soy consciente de display: block, pero realmente no funciona en la situación que estoy tratando de manejar ahora: un formulario con campos <input>. Algo como esto:

<form>
  Thingy 1: <input class="a" type="text" name="one" />
  Thingy 2: <input class="a" type="text" name="two" />
  Thingy 3: <input class="b" type="checkbox" name="three" />
  Thingy 4: <input class="b" type="checkbox" name="four" />
</form>

Me gustaría que se renderice para que cada etiqueta se muestre en la misma línea que el campo de entrada correspondiente. He intentado esto:

input.a:after { content: "\a" }

Pero eso no parecía hacer nada.

38
Craig Andera

Sería mejor envolver todos sus elementos en elementos de etiqueta, luego aplicar CSS a las etiquetas. Las pseudo clases: before y: after no son completamente compatibles de una manera consistente.

Las etiquetas de etiqueta tienen muchas ventajas, incluida una mayor accesibilidad (en múltiples niveles) y más.

<label>
    Thingy one: <input type="text" name="one">;
</label>

luego use CSS en sus elementos de etiqueta ...

label {display:block;clear:both;}
54
BrewinBombers

Los controles de formulario son tratados especialmente por los navegadores, por lo que muchas cosas no necesariamente funcionan como deberían. Una de estas cosas es el contenido generado: no funciona para los controles de formulario. En cambio, envuelva las etiquetas en <label> y use label:before { content: '\a' ; white-space: pre; }. También puedes hacerlo flotando todo y agregando clear: left al <label> elementos.

41
Jim

Parece que tienes un montón de elementos de formulario que te gustaría mostrar en una lista, ¿verdad? Hmm ... si solo esos tipos de especificaciones HTML hubieran pensado incluir marcas para manejar una lista de elementos ...

Te recomiendo que lo configures así:

<form>
  <ul>
    <li><label>Thingy 1:</label><input class="a" type="text" name="one" /></li>
    <li><label>Thingy 1:</label><input class="a" type="text" name="one" /></li>
 </ul>
</form>

Entonces el CSS se vuelve mucho más fácil.

12
Jon Galloway

lo siguiente le daría las nuevas líneas. Sin embargo, también pondría espacios adicionales al frente ... tendrías que estropear tu sangría de origen al eliminar las pestañas.

form { white-space: pre }
4
Jimmy
<form>
   <label>Thingy 1: <input class="a" type="text" name="one" /></label>
   <label>Thingy 2: <input class="a" type="text" name="two" /></label>
   <label>Thingy 3: <input class="b" type="checkbox" name="three" /></label>
   <label>Thingy 4: <input class="b" type="checkbox" name="four" /></label>
</form>

y el siguiente css

form label { display: block; }
2
daniels
<style type="text/css">
label, input { float: left; }
label { clear:left; }
</style>

<form>
    <label>thing 1:</label><input />
    <label>thing 2:</label><input />
</form>
2
Galen

Una opción es especificar una plantilla XSLT dentro de su XML que (algunos) navegadores procesará, lo que le permitirá incluir presentaciones con marcas, CSS, colores, etc. que no deberían afectar a los consumidores del servicio web.

Una vez en XHTML, simplemente puede agregar algo de relleno alrededor de los elementos con CSS, p.

formulario input.a {margin-bottom: 1em}

2
DamienG

El secreto es rodear toda su cosa, etiqueta y widget, en un lapso cuya clase bloquea y borra:

<style type="text/css">
.lb {
display:block;clear:both;
}
</style>

<form>
<span class="lb">Thingy 1: <input class="a" type="text" name="one" /></span>
<span class="lb">Thingy 2: <input class="a" type="text" name="two" /></span>
<span class="lb">Thingy 3: <input class="b" type="checkbox" name="three" /></span>
<span class="lb">Thingy 4: <input class="b" type="checkbox" name="four" /></span>
</form>
1
D-n Russler

Las opciones de JavaScript están complicando las cosas. Haz lo que Jon Galloway o daniels0xff sugirieron.

0
lordscarlet

Estoy de acuerdo con John Millikin. Puedes agregar en <span> etiquetas o algo alrededor de cada línea con una clase CSS definida, luego haga que se muestren: bloquee si es necesario. La única otra forma en que puedo pensar en hacer esto es hacer que el <input> un bloque en línea y hacer que emitan relleno "muy grande" a la derecha, lo que haría que el contenido en línea se ajustara.

Aun así, su mejor opción es agrupar lógicamente los datos en <span> etiquetas (o similar) para indicar que los datos pertenecen juntos (y luego dejar que el CSS haga el posicionamiento).

0
Thunder3

El elemento claro CSS es probablemente lo que está buscando para obtener los saltos de línea. Algo a lo largo:

#login form input {clear: both; }

se asegurará de que no queden otros elementos flotantes a ambos lados de los campos de entrada.

Referencia

0
Leo Utskot