【发布时间】：2020-09-13 16:35:57
【问题描述】：
我有一个想要水平对齐的部分，但是会发生这种情况：
我使用标签“*”对正文进行了编码，因此它有 0 边距和 0 填充。所以我认为这不是问题，我尝试删除 clearfixes 但它也不能解决我的问题。所以我现在被困住了，因为我不知道它是什么。我是这里的初学者，所以任何帮助都会很好，谢谢。
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, 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, 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, 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, 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 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;
}
【问题讨论】：
-
您能否创建一个 sn-p 或使用您为这些部分应用的所有样式更新问题？我认为您共享的任何 CSS 都不是造成这种情况的原因，因此问题可能在于您应用的其他样式（可能是 @media 之外的样式）
-
不用担心，随时 :) 如果您有不同的问题并且没有人能够帮助您，您可以在 qa 上标记我，如果我可以！
标签： html css frontend css-float responsive