Question

我正在做一个响应式幻灯片左侧菜单，但它有一些布局问题。我希望当单击移动菜单图标时，移动菜单会出现在黄色div下方，我使用margin-top：70px然后在其他浏览器中使用此方法菜单不会出现在黄色div下方。

然后，当点击移动图标时，我想要改变图标字体类别来自＆＃34; fa-fa-bars＆＃34;到＆＃34; fa-fa-close＆＃34;。但它不起作用。

然后是＆＃34;项目移动链接＆＃34;看起来没有与其他标题元素对齐，有点高于。

例如，在此示例中：https://jsfiddle.net/4ggsmqje/4/布局显示为我想要的但是带有＆＃34;边距：80px;＆＃34;在.Mobile__nav div上，使用＆＃34; margin-top：15px;＆＃34;在＆＃34;项目移动＆＃34;链接。但是这种方法在其他浏览器中看起来有所不同，移动幻灯片左侧菜单不会出现在黄色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

“项目移动”文本未垂直对齐，因为它包含在ul元素内，ul元素具有固定对齐的边距。您可以（或者作为最佳实践建议，您应该）为您的项目使用css reset。如果您不想这样做（出于任何原因），只需编写一条删除ul边距的规则，即ul{ margin:0; }

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

有些浏览器会根据不同的规则（如保证金）意外行动，所以我们应该始终坚持最佳做法。这是你应该使用css重置的另一个原因，使浏览器的所有预设默认值都相同。

请查看 this 示例。

一些问题造型移动幻灯片左菜单

1 个答案: