it-swarm-pt.tech

Como inserir quebras de linha em documentos HTML usando CSS

Estou escrevendo um serviço da web e quero retornar os dados como XHTML. Como são dados, não marcações, quero mantê-los limpos - sem <div>s ou <span>s extras. No entanto, como uma conveniência para os desenvolvedores, eu também gostaria de tornar os dados retornados razoavelmente legíveis em um navegador. Para fazer isso, estou pensando que uma boa maneira de fazê-lo seria usar CSS. 

O que eu especificamente quero fazer é inserir quebras de linha em certos lugares. Estou ciente de display: block, mas realmente não funciona na situação que estou tentando tratar agora - um formulário com campos <input>. Algo assim: 

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

Gostaria de renderizar para que cada rótulo seja exibido na mesma linha que o campo de entrada correspondente. Eu tentei isso: 

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

Mas isso não parece fazer nada. 

38
Craig Andera

Seria melhor envolver todos os elementos em elementos de etiqueta e aplicar css às ​​etiquetas. As pseudo classes: before e: after não são completamente suportadas de forma consistente.

Tags de etiquetas têm muitas vantagens, incluindo maior acessibilidade (em vários níveis) e muito mais.

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

em seguida, use CSS nos elementos da sua etiqueta ...

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

Os controles de formulário são tratados especialmente pelos navegadores, portanto, muitas coisas não funcionam necessariamente como deveriam. Uma dessas coisas é o conteúdo gerado - não funciona para controles de formulário. Em vez disso, envolva os rótulos em <label> e use label:before { content: '\a' ; white-space: pre; }. Você também pode fazer isso flutuando tudo e adicionando clear: left aos elementos <label>.

41
Jim

Parece que você tem vários itens de formulário que gostaria de exibir em uma lista, certo? Hmm ... se apenas esses caras da especificação HTML tivessem pensado em incluir marcações para lidar com uma lista de itens ...

Eu recomendo que você o configure assim:

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

Então o CSS fica muito mais fácil.

12
Jon Galloway

o seguinte lhe daria as novas linhas. Ele também colocaria espaços extras na frente embora ... você teria que atrapalhar seu recuo de origem removendo as tabulações.

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>

e o seguinte 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

Uma opção é especificar um modelo XSLT no seu XML que (alguns) navegadores processarão, permitindo incluir apresentação com marcação, CSS, cores etc. que não devem afetar os consumidores do serviço da web.

Uma vez em XHTML, você pode simplesmente adicionar um preenchimento em torno dos elementos com CSS, por exemplo,.

formulário input.a {margin-bottom: 1em}

2
DamienG

O segredo é cercar toda a sua coisa, rótulo e widget, em um intervalo cuja classe faz o bloco e claro:

<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

As opções de javascript estão complicando as coisas. Faça como Jon Galloway ou daniels0xff sugeriu.

0
lordscarlet

Eu concordo com John Millikin. Você pode adicionar tags <span> ou algo em torno de cada linha com uma classe CSS definida, então faça com que sejam exibidas: block, se necessário. A única outra maneira que eu posso pensar em fazer isso é fazer o <input> um bloco inline e fazê-los emitir "muito grande" padding-right, o que faria o conteúdo in-line quebrar.

Mesmo assim, sua melhor aposta é agrupar logicamente os dados em tags <span> (ou similar) para indicar que os dados pertencem a eles (e depois deixar o CSS fazer o posicionamento).

0
Thunder3

O elemento clear CSS é provavelmente o que você está procurando para obter o linebreaks.

# input do formulário de login { claro: ambos; }

certificar-se-á de que nenhum outro elemento flutuante seja deixado em ambos os lados dos campos de entrada.

Referência

0
Leo Utskot