0
解決策が私の目の前にある可能性が高いことがわかっているので、私は狂ったような問題を抱えています。私は画面上でサイズに達するように変更したいドロップダウンメニューを持っています。それは編集されていないときのようなもののスニペットです。@mediaを使ってポジショニングを変更する
.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;
}
}
しかし、それは正しく動作しません何らかの理由：私は画面には、以下を実行して、特定のサイズに達したときにfloat値を変更しようとすると、しかし、私のトラブルが来ます。これはかなり長いったらしい質問ので、この上の任意の助けをいただければ幸いです
.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>：次ページのように表示されます！
おそらく今はないかもしれませんが、 'float：top'はインクルードされていると思われます。http://www.w3.org/TR/css-page-floats-3/#float-プロパティ – Quantastical
はいページにはfloat：top cssコマンドがありますが、そのページは作業中のドラフトです。それはある種の勧告や将来の計画です。 – u238
私はちょうどそれを指摘していた。おそらく、回答の答えがコメントの行に沿っているように思われるので、別の解決策を提示するべきでしょう。 – Quantastical