如何解决使内容与标题保持一致
我有以下代码,我希望所有<h5>
都对齐。
我将align-items-center
添加到了row
的div中,并且在添加列表之前它一直有效。
编辑:我已经有padding: 0; margin: 0;
了。
.banner-section {
padding: 80px 50px;
}
.spad {
padding-top: 100px;
padding-bottom: 100px;
}
.section-title {
margin-bottom: 40px;
text-align: center;
}
.section-title h5 {
font-size: 22px;
font-weight: 700;
margin-bottom: 38px;
position: relative;
}
.section-title h5:before {
position: absolute;
left: 0;
right: 0;
bottom: -14px;
width: 80px;
height: 3px;
background: #e7ab3c;
content: "";
margin: 0 auto;
}
.section-title h5 a {
color: #252525;
}
.filter-subcategories {
margin-left: 20px;
list-style-type: none;
}
.filter-subcategories li,.filter-subcategories li a {
color: #b2b2b2 !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="banner-section spad">
<div class="container-fluid">
<div class="row justify-content-center">
<div class="col-md-3 col-lg-2 mb-3">
<div class="section-title">
<h5><a href="#">Men's Clothing</a> </h5>
</div>
<div class="section-details d-flex justify-content-center">
<ul class="filter-subcategories">
<li class="filter-subcategorys">
<a href="#">Bags</a>
</li>
<li class="filter-subcategorys">
<a href="#">Jackets</a>
</li>
<li class="filter-subcategorys">
<a href="#">Shoes</a>
</li>
</ul>
</div>
</div>
<div class="col-md-3 col-lg-2 mb-3">
<div class="section-title">
<h5><a href="#">Women's Clothing</a> </h5>
</div>
<div class="section-details d-flex justify-content-center">
<ul class="filter-subcategories">
<li class="filter-subcategorys">
<a href="#">Misc</a>
</li>
<li class="filter-subcategorys">
<a href="#">Tops</a>
</li>
</ul>
</div>
</div>
<div class="col-md-3 col-lg-2 mb-3">
<div class="section-title">
<h5><a href="#">Kid's Clothing</a> </h5>
</div>
<div class="section-details d-flex justify-content-center">
<ul class="filter-subcategories">
<li class="filter-subcategorys">
<a href="#">Jackets</a>
</li>
<li class="filter-subcategorys">
<a href="#">Misc</a>
</li>
</ul>
</div>
</div>
<div class="col-md-3 col-lg-2 mb-3">
<div class="section-title">
<h5><a href="#">Accessories & Equipment</a> </h5>
</div>
<div class="section-details d-flex justify-content-center">
<ul class="filter-subcategories">
<li class="filter-subcategory">
-
</li>
</ul>
</div>
</div>
<div class="col-md-3 col-lg-2 mb-3">
<div class="section-title">
<h5><a href="#">Sports Goods</a> </h5>
</div>
<div class="section-details d-flex justify-content-center">
<ul class="filter-subcategories">
<li class="filter-subcategory">
-
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
解决方法
问题是ul
标签具有默认的padding
值。如果您为项目添加css-normalizer
或为set padding: 0
ul
会更好
ul {
list-style: none;
margin: 0;
padding: 0;
}
,
请参阅filter-subcategories
类并使用以下规则:
.filter-subcategories {
margin-left: 0;
list-style-type: none;
padding: 0;
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。