设置移动幻灯片左侧菜单样式的一些问题

Question

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

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

然后"项目移动链接"看起来与其他标题元素居中对齐，有点高。

example：https：//jsfiddle.net/4ggsmqje/1/

例如，在这个例子中：https：//jsfiddle.net/4ggsmqje/4/布局按照我想要的样子出现，但在 .Mobile__navdiv，并在"项目移动"链接上显示"边距顶部：15px;"。但是使用这种方法，它在其他浏览器中看起来有所不同，移动滑动左侧菜单不会出现在黄色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 重置。如果您不想这样做(出于任何原因(，只需编写一个删除 ul 边距的规则，即ul{ margin:0; }

此外，对于"Mobile__nav"元素的位置，您不应该使用边距(尽管您可以(来定位它，因为它是一个固定位置的元素，而是您必须使用 top 属性对齐您的元素。

一些浏览器会出乎意料地遵循不同的规则(如保证金(，因此我们应该始终尝试坚持最佳实践。这是您应该使用 css 重置的另一个原因，以使浏览器的所有预设默认值相同。

请看这个例子。