¿Alguien sabe como puedo hacer una linea en css que ocupe todo el ancho de la pagina, la linea iria dentro de un div por eso me toma el ancho del div, l onda seria no utilizar witdh?
2 respuestas
Lo habitual es que la línea horizontal, si estás usando un elemento hr, tome el "100% del tamaño disponible" dentro del contenedor, es decir que si este tiene un padding horizontal del 5% esta línea tendrá el 90% del ancho de este contenedor, aunque le indiques que tome el 100%. Para dimensionarlo como quieres juega con los márgenes horizontales, asignándoles valores negativos.
Ejemplo:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
* {
box-sizing: border-box;
margin : 0;
padding : 0;
}
body {
padding: 5%;
}
.wrap {
background: lightgrey;
padding: 2% 5%;
}
hr.all-conteiner-width {
margin: 0 -5%;
}
hr.all-page-width {
margin: 0 -10%;
}
</style>
</head>
<body>
<div class="wrap">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora totam nemo dolorem provident cumque, impedit error consequuntur deserunt quo, inventore. Quam quibusdam odio amet natus, optio soluta sunt? Quidem, impedit.</p>
<hr>
<br>
<hr class="all-conteiner-width">
<br>
<hr class="all-page-width">
</div>
</body>
</html>
Veras que el primer elemento hr toma el 100% del espacio disponible como te dije antes, esto es, se ve afectado por el padding del contenedor, la siguiente línea si toma el 100% del ancho de su contenedor y la tercera el 100% del ancho de la página, solo usando margenes negativos para compensar los paddings que afectan a los elementos contenidos, tanto por el body como por el div.
Alternativamente puedes utilizar un gradiente lineal como imagen de fondo;
*{margin:0;
padding:0;
}
div {
width: 100vw;
height: 150px;
background-image:linear-gradient(transparent 50%,red 50%, red 50.5%, transparent 50.5%);}
}
<div></div>
width
? ¿algún motivo en concreto? (esta última pregunta es más por curiosidad). Lee Cómo preguntar y cómo crear un ejemplo mínimo verificable para más información y recomendaciones.