gpt4 book ai didi

html - 使用@media 改变定位

转载 作者:行者123 更新时间:2023-11-28 05:51:07 24 4
gpt4 key购买 nike

我遇到了一个让我发疯的问题,因为我知道解决方案很可能就在我眼前。我有一个下拉菜单,我想在达到一定尺寸的屏幕上进行更改。这是未经编辑时的片段。

.box {
float: left;
position: relative;
top: -50px;
max-height: 45px;
max-width: 150px;
}
.box button {
float: left;
background-color: #34495e;
border: none;
color: white;
width: 150px;
height: 50px;
text-align: center;
text-decoration: none;
display: inline-block;
font-family: 'Quicksand';
}
<html>

<head>
<link rel="stylesheet" href="styles.css">
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script>
$(function() {

$("#Dropdown").click(function() {
$("#Home").toggle();
$("#Profile").toggle();
$("#Group").toggle();
$("#Projects").toggle();
});

});
</script>
</head>

<body>

<div id="container">
<div class="dropdown">
<button id="Dropdown">
<img src="menu.png">
</button>
</div>
<div class="box">
<button id="Home">Home</button>
</div>
<div class="box">
<button id="Profile">Profile</button>
</div>
<div class="box">
<button id="Group">Group</button>
</div>
<div class="box">
<button id="Projects">Projects</button>
</div>
</div>

</body>

</html>

这很好用,我想要它。但是当我尝试通过执行以下操作在屏幕达到一定大小时更改浮点值时,我的麻烦就来了:

@media screen and (max-width: 768px) {

#Dropdown {display: block;}

.box button {
float: top;
display: inline-block;
}

.box {

float: top;
position: static;
top: 0;
margin-top: 10px;
max-height: 45px;
max-width: 150px;

}

}

但由于某些原因,它无法正常工作。它应该显示如下页面:

.box {
float: top;
margin-top: 0px;
max-height: 45px;
max-width: 150px;
}
.box button {
float: top;
background-color: #34495e;
border: none;
color: white;
width: 150px;
height: 50px;
text-align: center;
text-decoration: none;
display: inline-block;
font-family: 'Quicksand';
}
<html>

<head>
<link rel="stylesheet" href="styles.css">
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script>
$(function() {

$("#Dropdown").click(function() {
$("#Home").toggle();
$("#Profile").toggle();
$("#Group").toggle();
$("#Projects").toggle();
});

});
</script>
</head>

<body>

<div id="container">
<div class="dropdown">
<button id="Dropdown">
<img src="menu.png">
</button>
</div>
<div class="box">
<button id="Home">Home</button>
</div>
<div class="box">
<button id="Profile">Profile</button>
</div>
<div class="box">
<button id="Group">Group</button>
</div>
<div class="box">
<button id="Projects">Projects</button>
</div>
</div>

</body>

</html>

这是一个非常冗长的问题,因此我们将不胜感激任何帮助!

最佳答案

据我所知,没有 css 命令 float:top;float 可以带参数:left, right, none, inline-start , 内联结束

关于html - 使用@media 改变定位,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37329989/

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