gpt4 book ai didi

html - css 菜单在移动设备上消失

转载 作者:太空宇宙 更新时间:2023-11-04 11:33:12 27 4
gpt4 key购买 nike

这是我创建的 CSS 菜单。

当我在我的手机 (iPhone 6) 中看到这个时,最后一个菜单 (Menu4) 根本没有显示。前 3 个菜单从电话屏幕的左侧延伸到右侧。我不明白为什么。

有人可以帮忙吗?

这是 HTML 部分

 <hr class="navHr">
<nav id="m">
<a href="#" data-mirror="Menu1">Menu1</a>
<a href="#" data-mirror="Menu2">Menu2</a>
<a href="#" data-mirror="Menu3">Menu3</a>
<a href="#" data-mirror="Menu4">Menu4</a>
</nav>
<hr class="navHr">

还有CSS部分

.navHr {
border: 0;
height: 0.1em;
margin: 0;
background-image: -webkit-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
background-image: -moz-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
background-image: -ms-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
background-image: -o-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
}



nav {
height: 2em;
background: #000;
background: linear-gradient(to bottom, rgba(76, 76, 76, 1) 0%, rgba(44, 44, 44, 1) 50%, rgba(0, 0, 0, 1) 51%, rgba(19, 19, 19, 1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4c4c4c', endColorstr='#131313',GradientType=0 );
line-height: 2em;
text-transform: uppercase;
text-align: center;
min-width: 2em;
position: relative;
}
nav::before {
background: linear-gradient(to top, rgba(76, 76, 76, 0) 0%, rgba(44, 44, 44, 1) 50%, rgba(0, 0, 0, 1) 51%, rgba(19, 19, 19, 1) 100%);
content: '';
display: block;
position: absolute;
top: 100%;
left: 0;
width: 100%;
height: 100%;
opacity: 0.09;
}
nav a {
color: #FFF;
text-decoration: none;
font-weight: bold;
font-size: 1.2em;
border-right: solid 0.1em #FFF;
height: 100%;
padding: 0.25em 3em;
position: relative;
}

nav a:first-child {
border-left: solid 0.1em #FFF;
}
nav a::before {
content: attr(data-mirror);
position: absolute;
top: 100%;
left: 3em;
color: #000;
transform: scaleY(-1);
color: #FFF;
opacity: 0.5;
}

#m {
background-color: #000000;
}

最佳答案

我已经检查了你的代码,尝试在你的anchor tag上添加"display:inline-block",你会看到你的第4列出现,第四个在小屏幕上,一个位于第二个下方,因为位置是相对,请在此处尝试:

Columns

基本上,您正在寻找的是将元素显示为内联级 block 容器以避免错位。该 block 的内部被格式化为 block 级框,元素本身被格式化为行内级框,这塑造了这 4 个相邻列的导航。

我们为什么要使用 inline-block

  • Inline-block 使元素生成一个 block 状框,其布局就像一个内联框。
  • 内联 block 被放置在行内(即与相邻内容在同一行),但它的行为就像一个 block 。
  • 基本上,这是一种使元素内联的方法,但保留了它们的 block 功能,例如设置宽度和高度、顶部和底部边距以及填充等。

关于html - css 菜单在移动设备上消失,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31913272/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com