Question

我有一个包含一些项目的菜单，下面有一个带有h4“最近”和一个按钮“ Btn”的容器，“ Btn”在右边与最后一项水平对齐，正确。但是，“最近”未与菜单中的第一项“项目1”水平对齐。你知道为什么吗？

HTML：

<div class="container-flex">
    <div class="menu-row row">
        <div class="col">
            <div class="container">
                <ul class="categories_menu">
                    <li class="list-item--hidden">
                        <a href="javascript:void(0)" name="category" id="">Item 1</a>
                    </li>
                    <li class="list-item--hidden">
                        <a href="javascript:void(0)" name="category" id="">Item 2</a>
                    </li>
                    <li class="list-item--hidden">
                        <a href="javascript:void(0)" name="category" id="">Item 3</a>
                    </li>
                    <li class="list-item--hidden">
                        <a href="javascript:void(0)" name="category" id="">Item 4</a>
                    </li>
                    <li class="list-item--hidden">
                        <a href="javascript:void(0)" name="category" id="">Item 5</a>
                    </li>
                    <li class="list-item--hidden">
                        <a href="javascript:void(0)" name="category" id="">Item 6</a>
                    </li>
                    <li class="list-item--hidden">
                        <a href="javascript:void(0)" name="category" id="">Item 7</a>
                    </li>
                    <li><a data-toggle="modal" id="" data-target="" href="">More
                            <i class="fa fa-caret-down" aria-hidden="true"></i></a></li>
                </ul>
            </div>
        </div>
    </div>
</div>

<div class="container py-3">
    <div class="row align-items-center">
        <div class="col">
            <h4 class="display-5 font-weight-bold text-dark">Latest</h4>
        </div>
        <div class="col text-right">
            <a href="" class="btn btn-primary justify-content-end">Btn</a>
        </div>
    </div>
</div>

CSS：

.categories_menu {
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  -moz-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  transition: all 100ms ease-out;
}

.categories_menu li {
  -moz-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  border-bottom: 5px solid transparent;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -moz-box-flex: 1;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  height: 59px;
  -moz-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  padding: 10px 0 5px 0;
  border-left: 1px solid #e5f0fa;
}


.categories_menu li:last-child {
  border-right: 1px solid #e5f0fa;
}


.categories_menu a {
  color: #414e5f;
  font-size: 18px;
  font-weight: bold;
  border-bottom: 5px solid transparent;
  text-decoration: none;
}


.menu-row {
  border-bottom: 1px solid #e5f0fa;
}

.menu-row ul {
  margin-bottom: 0;
}

Answer 1

您需要重置菜单列表样式，以删除所有默认的填充和空白-将以下内容添加到categories_menu：

.categories_menu {
  padding:0;
  margin:0;
}

Updated fiddle

Answer 2

默认情况下，您在用户代理样式表的padding-inline-start: 40px;中有ul, menu, dir，您可以将padding-left: 0;添加到.categories_menu。

.categories_menu {
  padding-left: 0; //add this rule
}

我的建议是使用或创建默认的reset.css。 CSS重置（或“重置CSS”）是一组简短的，经常压缩（最小化）的CSS规则，可将所有HTML元素的样式重置为一致的基线。

如果您不知道，每个浏览器都有自己的默认“用户代理”样式表，该样式表用于使未样式化的网站看起来更清晰。例如，大多数浏览器默认将链接设置为蓝色，将访问的链接设置为紫色，为表格提供一定数量的边框和填充，对H1，H2，H3等应用可变的字体大小，并对几乎所有内容都添加一定的填充。

Working fiddle

为什么h4没有与菜单的第一项水平对齐？

2 个答案: