línea horizontal y forma correcta de codificarlo en html, css

122

Necesito dibujar una línea horizontal después de un bloque, y tengo tres formas de hacerlo:

1) Definir una clase h_liney agregarle funciones CSS, como

#css
.hline { width:100%; height:1px; background: #fff }

#html
<div class="block_1">Lorem</div> <div class="h_line"></div>

2) Usar hretiqueta

#css
hr { width:100%; height:1px; background: #fff }

#html
<div class="block_1">Lorem</div> <hr />

3) afterutilízalo como una pseudoclase

#css
.hline:after { width:100%; height:1px; background: #fff; content:"" }

#html
<div class="block_1 h_line">Lorem</div>

¿Cuál es la forma más práctica?

html css Павел Тявин
fuente
2
Creo que <hr>es el más semántico. Quiero decir, ¿no es eso para lo que está destinado?
j08691
3
¿Por qué no usar border-bottom?
jsweazy
3
En HTML5, el elemento HTML <hr> representa una ruptura temática entre elementos de nivel de párrafo (por ejemplo, un cambio de escena en una historia o un cambio de tema con una sección).
Scott Simpson

Respuestas:

138 

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}
<div>Hello</div>
<hr/>
<div>World</div>
Expandir fragmento

Así es como lo hace html5boilerplate :

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}
Moettinger
fuente
3
Nota: Úselo margin: 1em autosi desea que siempre esté en el centro de la página.
Jacques Marais
1
@JacquesMarais, no estoy seguro de que sea necesario, ya que es un elemento de bloque sin ancho definido, por lo que abarcaría el ancho de todo el contenedor de todos modos.
moettinger
65

Iría por el marcado semántico, use un <hr/>.

A menos que sea solo un borde lo que desea, puede usar una combinación de relleno, borde y margen para obtener el límite deseado.

bevacqua
fuente
8
<hr>es válido HTML5. Solía ​​representar una regla horizontal, pero ahora se define en términos semánticos como una ruptura temática entre el contenido. La mayoría de los navegadores lo mostrarán como una línea horizontal a menos que se indique lo contrario. Fuente: developer.mozilla.org/en-US/docs/Web/HTML/Element/hr
AJMaxwell
El título dice línea horizontal y <hr /> es eso, así que subí esto. El título tal vez debería haber leído la línea horizontal con estilo.
Ryan Bayne
11

En HTML5, la <hr>etiqueta define un salto temático. En HTML 4.01, la <hr>etiqueta representa una regla horizontal.

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

Entonces, después de la definición, preferiría <hr>

bpoiss
fuente
10

Si realmente quieres un descanso temático , utiliza la <hr>etiqueta.

Si solo desea una línea de diseño, podría usar algo como la clase css

.hline-bottom {
    padding-bottom: 10px;
    border-bottom: 2px solid #000; /* whichever color you prefer */
}

y úsalo como

<div class="block_1 hline-bottom">Cheese</div>
serv-inc
fuente
5

Quería un guión largo como línea, así que usé esto.

.dash{
        border: 1px solid red;
        width: 120px;
        height: 0px;

}
<div class="dash"></div>
Expandir fragmento

Alia
fuente
5 

.line {
  width: 53px;
  height: 0;
  border: 1px solid #C4C4C4;
  margin: 3px;
  display:inline-block;
}
<html>
<body>
<div class="line"></div>
<div style="display:inline-block;">OR</div>
<div class="line"></div>
</body>
</html>
Expandir fragmento

Nadeem Qasmi
fuente
No ha respondido la pregunta "¿Cuál es la más práctica?"
Brian Tompsett - 汤 莱恩
1

Mi solución simple es diseñar hr con css para tener márgenes cero superior e inferior, borde cero, altura de 1 píxel y color de fondo contrastante. Esto se puede hacer estableciendo el estilo directamente o definiendo una clase, por ejemplo, como:

.thin_hr {
margin-top:0;
margin-bottom:0;
border:0;
height:1px;
background-color:black;
}
FredG
fuente
1

depende del requisito, pero muchas sugerencias de los desarrolladores es hacer que su código sea lo más simple posible . entonces, ve con la simple etiqueta "hr" y el código CSS para eso.

Ram Prasad
fuente
0 

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}
<div>Hello</div>
<hr/>
<div>World</div>
Expandir fragmento
texto enfatizado

bruh
fuente
Por favor agregue un comentario explicando su respuesta.
Barthy