1

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

1
  • Hola nani, añade el código que tengas para poder ayudarte mejor. Tal y como está redactada ahora mismo la pregunta, no termina de quedar del todo claro qué es lo que quieres o cuál es el problema que estás encontrando. Además describe algo más el problema: ¿no se puede usar 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.
    – Alvaro Montoro
    Commented el 8 ene. 2019 a las 11:40

2 respuestas 2

0

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.

0

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>

0

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.