使用@media更改定位(Using @media to change positioning)

编程入门行业动态更新时间:2024-10-22 18:33:17

我遇到的问题让我发疯，因为我知道解决方案可能就在我面前。我有一个下拉菜单，我想在屏幕上更改达到一个大小。这是未经编辑时的情况片段。

.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> 
  
 
 
 这是一个非常冗长的问题，所以对此的任何帮助将不胜感激！ 
I'm having a problem that's driving me crazy because I know the solution is likely right in front of my eyes. I have a dropdown menu that I want to change on the screen reaching a size. Here is the snippet of what it it is like when it's unedited. 
 
 
  
  .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> 
  
 
 
This works fine and how I want it. But my trouble comes when I try to change the float value when the screen reaches a certain size by doing the following:  
@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;

}

}
 
But for some reason it doesn't work right. It should appear like the following page:  
 
 
  
  .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> 
  
 
 
This is a pretty long winded question so any help on this would be greatly appreciated!
                最满意答案
                
                    
                         据我所知，没有css命令float:top; 。 float可以采用以下参数： left ， right ， none ， inline-start ， inline-end 。 
As I know, there is no css command float:top;. float can take the parameters: left, right, none, inline-start, inline-end.