Colocar linha no site!

como colocar linha no site, sem ser underline, é tipo de um caderno!

Um exemplo tosco que montei aqui (com certeza deve ter forma melhor de fazer):

<style>
	span.linha {
		display: block;
		border-bottom: 1px solid lightgray;
		height: 20px;
	}
</style>

<span class="linha">
	<p>Seu texto começa aqui...</p>
</span>

<span class="linha">
	<p></p>
</span>

<span class="linha">
	<p></p>
</span>

<span class="linha">
	<p></p>
</span>

<span class="linha">
	<p></p>
</span>

<span class="linha">
	<p></p>
</span>

<span class="linha">
	<p></p>
</span>

<span class="linha">
	<p></p>
</span>

<span class="linha">
	<p></p>
</span>

<span class="linha">
	<p></p>
</span>

<span class="linha">
	<p></p>
</span>

<span class="linha">
	<p></p>
</span>

<span class="linha">
	<p></p>
</span>

<span class="linha">
	<p></p>
</span>

<span class="linha">
	<p></p>
</span>

<span class="linha">
	<p></p>
</span>

<span class="linha">
	<p></p>
</span>

<span class="linha">
	<p></p>
</span>

<span class="linha">
	<p></p>
</span>

<span class="linha">
	<p></p>
</span>

<span class="linha">
	<p></p>
</span>

<span class="linha">
	<p></p>
</span>

<span class="linha">
	<p></p>
</span>

<span class="linha">
	<p></p>
</span>

<span class="linha">
	<p></p>
</span>

<span class="linha">
	<p></p>
</span>

<span class="linha">
	<p></p>
</span>

<span class="linha">
	<p></p>
</span>

<span class="linha">
	<p></p>
</span>

<span class="linha">
	<p></p>
</span>

<span class="linha">
	<p></p>
</span>

<span class="linha">
	<p></p>
</span>

<span class="linha">
	<p></p>
</span>

<span class="linha">
	<p></p>
</span>

<span class="linha">
	<p></p>
</span>

Boa noite @geovane10, utilize a tag <hr/>.

https://www.w3schools.com/tags/tag_hr.asp

bom acho que vocês não entenderam o que eu quero é isso https://drive.google.com/file/d/1Fbshm8fNc3_HKVU_P5ZL-2ecHC7cgv_v/view?usp=sharing

@geovane10, uma dúvida.

Seria algo como aquele formulários que são impressões onde para preenchimento?

Tipo:

Nome: _____________________________
Telefone: _______________________________

Algo assim?

clica no link por favor!

Como assim eles não entenderam? O exemplo que o @Lucas_Camara deu faz praticamente isso que vc colocou na sua imagem.

Vc só precisa ajustar os espaçamentos pra ficar do jeito que vc quer.

Uma dica: Quando precisar mostrar imagens, ao invés de colocar o link pra imagem, insere ela diretamente na postagem, fica mais facil pra todos.

Boa tarde @geovane10, as imagens do link estão bem distorcidas. Difícil de entender.

Mas utilizando a tag hr ou border-bottom estilizado com css te atenderá.

Talvez se você colocar um print do resultado final que está procurando ficaria mais fácil entender o que está buscando.

cara, é só você usar as propriedades border no input do seu formulário

fiz algo rápido no css pra vc ter noção

é isso? https://codepen.io/codetodestroy/pen/xxwWBpE?editors=1100

isso, mais tem umas linhas do lado das palavras que eu não consigo por também!

Usa table, com duas colunas, sem header e somente borda inferior (border-bottom) na td da segunda coluna.

na verdade não é isso que eu quero!

O que quer entao jovem?

@geovane10, a solução proposta pelo @caiodqribeiro

atende a parte dos campos.

As linhas debaixo das palavras:

Utilize border-bottom igual o @caiodqribeiro utilizou no input:

Mas coloque no elemento correspondente.

1 curtida