如何将超出身体边缘的部分水平对齐到中心？

编程问答 2022-07-05

问题描述

我有一个想要水平对齐的部分，但这就是发生的情况：

enter image description here

我用标签“ *”对正文进行了编码，因此它的空白为0，填充为0。因此，我认为这不是问题，我尝试删除了这些clearfix，但也无法解决我的问题。所以我现在被困了，因为我不知道那是什么。我是这里的初学者，谢谢您的帮助。

PS：我忘了说它只有在我试图使其响应时才会发生。

这是我认为主要导致问题的两个部分的HTML：

   <aside id="lateralBar" class="clearfix">
        <h3>
            Buscar
        </h3>
        <div id="search">
            <form action="#">
                <input type="text">
                <input type="button" value="L" class="icon">
            </form>
        </div>
        <h3>
            Login
        </h3>
        <div id="login" class="lateralBox">
            <form action="">
                <label id="user" class="icon">U</label>
                <input type="email">

                <label id="password" class="icon">w</label>
                <input type="password">

                <input type="submit" value="Entrar">
                <input type="reset" value="Limpiar">

                <a href="#">Registrate aquí</a>
                <a href="#">¿Has olvidado tu contraseña?</a>
            </form>
        </div>
        <h3>
            Redes sociales
        </h3>
        <div id="socialNetwork" class="lateralBox">
            <div class="twitter">
                <a href="#" class="icon">t</a>
                <p class="overlay">
                    Twitter
                </p>
            </div>
            <div class="facebook">
                <a href="#" class="icon">f</a>
                <p class="overlay">
                    Facebook
                </p>
            </div>
            <div class="youtube">
                <a href="#" class="icon">y</a>
                <p class="overlay">
                    Youtube
                </p>
            </div>
        </div>
        <h3>
            Patrocinadores
        </h3>
        <div id="sponsors" class="lateralBox">

        </div>
    </aside>

    <!-- Fin aside -->

    <!-- Inicio articulos -->

    <section id="articles" class="clearfix">
        <h2>Últimos artículos</h2>
        <article>
            <div class="data">
                <span>
                    Fecha: 12 de diciembre
                </span>
                <span>
                    Categoría: Pruebas
                </span>
            </div>
            <h4>
                <a href="#">Título del artículo</a>
            </h4>
                <p>
                    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries,but also the leap into electronic typesetting,remaining essentially unchanged.
                </p>
        </article>
        <article>
            <div class="data">
                <span>
                    Fecha: 12 de diciembre
                </span>
                <span>
                    Categoría: Pruebas
                </span>
            </div>
            <h4>
                <a href="#">Título del artículo</a>
            </h4>
                <p>
                    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,remaining essentially unchanged.
                </p>
        </article>
        <article id="blog">
            <a href="#">Ir al blog</a>
        </article>
    </section>

这是响应式的CSS：

@media (max-width: 660px) {
    #banner h1 {
        font-size: 25px;
    }

    #lateralBar {
        float: none;
        width: 100%;
        margin: 0 auto;
        min-height: auto;
        margin-top: 20px;
    }

    #lateralBar input[type="text"]{
        width: 93%;
    }

    #login input[type="email"],#login input[type="password"] {
        width: 90%;
    }

    #articles {
        float: none;
        width: 100%;
        margin: 0px auto;
        min-height: auto;
        margin-top: 20px;
    }

更新：

这是上一个媒体查询：

@media (max-width: 925px) {
    #articles {
        width: 45%;
    }

    #articles .data {
        margin-left: 20px;
        margin-bottom: 20px;
    }

和原始CSS：

/* ARTICLES */

#articles {
    width: 860px;
}

#articles h2 {
    display: block;
    width: 98%;
    height: 75px;
    line-height: 75px;
    text-align: center;
    font-family: "BebasNeue";
    font-size: 40px;
    font-weight: normal;
    letter-spacing: 2px;
    background: url("../img/pxgray.png");
    box-shadow: 0px 1px 0px #393d3f,1px 2px 0px #393d3f,2px 3px 0px #393d3f,3px 4px 0px #393d3f;
    margin: 0 auto;
    margin-top: 18px;
    margin-left: 101px;
    margin-bottom: 15px;
}

#articles article {
    display: block;
    width: 87.5%;
    height: auto;
    border: 1px solid #ccc;
    margin: 40px auto;
    margin-left: 101px;
    padding: 10px;
    font-family: "TrebuchetMS";
    background: white;
    color: black;
    box-shadow: 1px 1px 2px #ddd;
}

#articles article h4 {
    display: block;
    font-size: 23px;
    margin: 3px auto;
}

#articles article h4 a {
    text-decoration: none;
    color: #00538C;
}

#articles article h4 a:hover {
    text-decoration: underline;
}

#articles .data {
    float: right;
    background: #393d3f;
    color: white;
    height: 30px;
    line-height: 30px;
    margin: -5px;
    padding: 4px;
    font-size: 13px;
    border-radius: 0px 0px 0px 20px;
}

#articles .data span {
    margin: 6px;
}

#articles article p {
    margin: 10px auto;
    font-size: 15px;
}

解决方法

我只是使用您提供的代码创建了一个代码段，即使仍然缺少某些样式，我想我也找到了您取消该对齐的原因。

最简单的答案是，在这些元素上设置了一些左边距。尝试从应用于margin-left: 101px;和#articles h2的样式中删除#articles article

以下是未对齐的代码段：

/* ARTICLES */

#articles {
    width: 860px;
}

#articles h2 {
    display: block;
    width: 98%;
    height: 75px;
    line-height: 75px;
    text-align: center;
    font-family: "BebasNeue";
    font-size: 40px;
    font-weight: normal;
    letter-spacing: 2px;
    background: url("../img/pxgray.png");
    box-shadow: 0px 1px 0px #393d3f,1px 2px 0px #393d3f,2px 3px 0px #393d3f,3px 4px 0px #393d3f;
    margin: 0 auto;
    margin-top: 18px;
    margin-left: 101px;
    margin-bottom: 15px;
}

#articles article {
    display: block;
    width: 87.5%;
    height: auto;
    border: 1px solid #ccc;
    margin: 40px auto;
    margin-left: 101px;
    padding: 10px;
    font-family: "TrebuchetMS";
    background: white;
    color: black;
    box-shadow: 1px 1px 2px #ddd;
}

#articles article h4 {
    display: block;
    font-size: 23px;
    margin: 3px auto;
}

#articles article h4 a {
    text-decoration: none;
    color: #00538C;
}

#articles article h4 a:hover {
    text-decoration: underline;
}

#articles .data {
    float: right;
    background: #393d3f;
    color: white;
    height: 30px;
    line-height: 30px;
    margin: -5px;
    padding: 4px;
    font-size: 13px;
    border-radius: 0px 0px 0px 20px;
}

#articles .data span {
    margin: 6px;
}

#articles article p {
    margin: 10px auto;
    font-size: 15px;
}

@media (max-width: 925px) {
    #articles {
        width: 45%;
    }

    #articles .data {
        margin-left: 20px;
        margin-bottom: 20px;
    }
}

@media (max-width: 660px) {
    #banner h1 {
        font-size: 25px;
    }

    #lateralBar {
        float: none;
        width: 100%;
        margin: 0 auto;
        min-height: auto;
        margin-top: 20px;
    }

    #lateralBar input[type="text"]{
        width: 93%;
    }

    #login input[type="email"],#login input[type="password"] {
        width: 90%;
    }

    #articles {
        float: none;
        width: 100%;
        margin: 0px auto;
        min-height: auto;
        margin-top: 20px;
    }
<aside id="lateralBar" class="clearfix">
        <h3>
            Buscar
        </h3>
        <div id="search">
            <form action="#">
                <input type="text">
                <input type="button" value="L" class="icon">
            </form>
        </div>
        <h3>
            Login
        </h3>
        <div id="login" class="lateralBox">
            <form action="">
                <label id="user" class="icon">U</label>
                <input type="email">

                <label id="password" class="icon">w</label>
                <input type="password">

                <input type="submit" value="Entrar">
                <input type="reset" value="Limpiar">

                <a href="#">Registrate aquí</a>
                <a href="#">¿Has olvidado tu contraseña?</a>
            </form>
        </div>
        <h3>
            Redes sociales
        </h3>
        <div id="socialNetwork" class="lateralBox">
            <div class="twitter">
                <a href="#" class="icon">t</a>
                <p class="overlay">
                    Twitter
                </p>
            </div>
            <div class="facebook">
                <a href="#" class="icon">f</a>
                <p class="overlay">
                    Facebook
                </p>
            </div>
            <div class="youtube">
                <a href="#" class="icon">y</a>
                <p class="overlay">
                    Youtube
                </p>
            </div>
        </div>
        <h3>
            Patrocinadores
        </h3>
        <div id="sponsors" class="lateralBox">

        </div>
    </aside>

    <!-- Fin aside -->

    <!-- Inicio articulos -->

    <section id="articles" class="clearfix">
        <h2>Últimos artículos</h2>
        <article>
            <div class="data">
                <span>
                    Fecha: 12 de diciembre
                </span>
                <span>
                    Categoría: Pruebas
                </span>
            </div>
            <h4>
                <a href="#">Título del artículo</a>
            </h4>
                <p>
                    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries,but also the leap into electronic typesetting,remaining essentially unchanged.
                </p>
        </article>
        <article>
            <div class="data">
                <span>
                    Fecha: 12 de diciembre
                </span>
                <span>
                    Categoría: Pruebas
                </span>
            </div>
            <h4>
                <a href="#">Título del artículo</a>
            </h4>
                <p>
                    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,remaining essentially unchanged.
                </p>
        </article>
        <article id="blog">
            <a href="#">Ir al blog</a>
        </article>
    </section>

这是所有内容对齐的代码段（我从这些样式中删除了左边距）：

/* ARTICLES */

#articles {
    width: 860px;
}

#articles h2 {
    display: block;
    width: 98%;
    height: 75px;
    line-height: 75px;
    text-align: center;
    font-family: "BebasNeue";
    font-size: 40px;
    font-weight: normal;
    letter-spacing: 2px;
    background: url("../img/pxgray.png");
    box-shadow: 0px 1px 0px #393d3f,3px 4px 0px #393d3f;
    margin: 0 auto;
    margin-top: 18px;
    margin-bottom: 15px;
}

#articles article {
    display: block;
    width: 87.5%;
    height: auto;
    border: 1px solid #ccc;
    margin: 40px auto;
    padding: 10px;
    font-family: "TrebuchetMS";
    background: white;
    color: black;
    box-shadow: 1px 1px 2px #ddd;
}

#articles article h4 {
    display: block;
    font-size: 23px;
    margin: 3px auto;
}

#articles article h4 a {
    text-decoration: none;
    color: #00538C;
}

#articles article h4 a:hover {
    text-decoration: underline;
}

#articles .data {
    float: right;
    background: #393d3f;
    color: white;
    height: 30px;
    line-height: 30px;
    margin: -5px;
    padding: 4px;
    font-size: 13px;
    border-radius: 0px 0px 0px 20px;
}

#articles .data span {
    margin: 6px;
}

#articles article p {
    margin: 10px auto;
    font-size: 15px;
}

@media (max-width: 925px) {
    #articles {
        width: 45%;
    }

    #articles .data {
        margin-left: 20px;
        margin-bottom: 20px;
    }
}

@media (max-width: 660px) {
    #banner h1 {
        font-size: 25px;
    }

    #lateralBar {
        float: none;
        width: 100%;
        margin: 0 auto;
        min-height: auto;
        margin-top: 20px;
    }

    #lateralBar input[type="text"]{
        width: 93%;
    }

    #login input[type="email"],remaining essentially unchanged.
                </p>
        </article>
        <article id="blog">
            <a href="#">Ir al blog</a>
        </article>
    </section>

css-floatfrontendhtmlresponsive

相关问答

matplotlib报错：AttributeError: module 'backend_interagg' has no attribute 'FigureCanvas'. Did you mean: 'FigureCanvasAgg'?
使用本地python环境可以成功执行 import pandas as pd impor...
gitlab登录失败，报错：This challenge page was accidentally cached by an intermediary and is no longer available.
设置时间 控制面板
后端开发常见错误
错误1：Request method ‘DELETE‘ not supported 错误还原：...
docker常见错误
错误1：启动docker镜像时报错：Error response from daemon:...
idea常见错误
错误1：private field ‘xxx‘ is never assigned 按Alt...
pip安装依赖失败
报错如下，通过源不能下载，最后警告pip需升级版本 Requirem...