设置移动左滑菜单样式的一些问题

Question

我正在做一个响应式左滑菜单，但它有一些布局问题。我希望当点击移动菜单图标时，移动菜单会出现在黄色 div 的正下方，我使用 margin-top:70px 来表示，然后在其他浏览器中使用这种方法，菜单不会出现在黄色 div 的正下方。

然后，当单击移动图标时，我想将图标字体类从“fa-fa-bars”更改为“fa-fa-close”。但它不起作用。

然后“Item Mobile 链接”看起来并没有与其他标题元素居中对齐，有点高。

例如：https://jsfiddle.net/4ggsmqje/1/

例如在这个例子中：https://jsfiddle.net/4ggsmqje/4/ 布局显示为我想要的，但带有“margin-top:80px;”在 .Mobile__nav div 上并带有“margin-top: 15px;”在“Item Mobile”链接上。但是使用这种方法在其他浏览器中看起来会有所不同，移动左滑菜单不会出现在黄色 div 的正下方，而是略高于或低于。

HTML：

<div class="Header" style="background:yellow;">
    <div class="container">
        <div class="row align-items-center justify-content-between">
          <div class="col-4 col-sm-4 d-md-none  d-lg-none d-xl-none">
            <div class="Header__mobile__menu">
              <a id="mobile" href=""><i class="fa fa-bars" aria-hidden="true"></i></a>
            </div>
          </div>
          <div class="col-4 col-sm-4 d-md-none d-lg-none d-xl-none">
            <div class="Header__logo">
              <a href="">Logo</a>
            </div>
          </div>
          <div class="col-4 col-4 co-sm-4 d-md-none d-lg-none d-xl-none">
            <ul>
              <li><a href>Item Mobile</a></li>
            </ul>
          </div>
            <div class="d-none d-md-block d-lg-block d-xl-block col-md-4">
                <div class="Header__logo">
                    <a href="">Logo</a>
                </div>
            </div>
            <ul class="Mobile__nav">
                <li><a  href="">Item 1</a></li>
                <li><a  href="">Item 2</a></li>
                <li><a  href="">Item 3</a></li>
                <li><a  href="">Item 4</a></li>
                <li><a  href="">Item 5 <i class="fa fa-caret-down" aria-hidden="true"></i></a></li>
            </ul>
            <div class="col-8 col-sm-8 d-none d-md-block">
                <ul class="Header__nav">
                  <li><a  href="">Item 1</a></li>
                  <li><a  href="">Item 2</a></li>
                  <li><a  href="">Item 3</a></li>
                  <li><a  href="">Item 4</a></li>
                </ul>
            </div>
        </div>
    </div>

CSS：

.Header{
  padding: 15px 0;
  border-bottom: 1px solid orange;
}

.Mobile__nav{
  margin-top:70px;

  position: fixed;
  left: 0;
  top: 0;
  width: 76%;
  height: 100%;
  min-width: 200px;
  max-width: 340px;
  background-color: gray;
  z-index: 1000;
  overflow: hidden;
  overflow-y: auto;

  li{
    display: block;
    width: 100%;
    padding:  20px;
  }

  li a{
    color: orange;

  }
}

.Header__logo{
  h1{
    color: orange;
  }
}

.Header__mobile__menu{
  cursor: pointer;
  float: left;
  a{
    color: orange;
  }
}

jquery:

$('#mobile').click(function() {
    $("i", this).toggleClass("fa-fa-bars fa-fa-close");
});

Answer 1

“Item Mobile”文本未垂直对齐，因为它被包裹在 ul 元素内，而 ul 元素的边距会导致对齐错误。您可以（或按照最佳实践建议，您应该）为您的项目使用css reset。如果您不想这样做（出于任何原因），只需编写一条删除 ul 边距的规则，即ul{ margin:0; }

同样对于“Mobile__nav”元素的位置，你不应该使用边距（虽然你可以）来定位它，因为它是一个固定位置的元素，你必须使用 top 属性来对齐你的元素。

某些浏览器会根据不同的规则（如边距）出人意料地采取行动，因此我们应始终尝试坚持最佳做法。这也是您应该使用 css 重置的另一个原因，以使浏览器的所有预设默认值都相同。

请看一下this示例。