当页面不是全屏时，我不知道如何防止 HTML 中的按钮移动

Question

我的网页我的网页最小化

正如您在图片中看到的那样，整页显示时看起来不错。但是当我最小化屏幕时，按钮会消失。我如何解决它？我想让我的按钮不飞散这是我的全部代码。

我尝试使用 meta viewport 标签，但没有用。

body {
  background-color: #F0EAD6;
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
}

.header {
  display: flex;
  align-items: center;
  background-color: #00704A;
  color: white;
  height: 60px;
  padding: 0 20px;
}

.logo {
  width: 106px;
  height: 64px;
  margin-right: auto;
}

.button {
  display: inline-block;
  padding: 10px 20px;
  border-radius: 20px;
  margin-left: 10px;
  background-color: white;
  color: #00704A;
  font-weight: bold;
  text-decoration: none;
  transition: background-color 0.19s ease, color 0.19s ease;
}

.button:hover {
  background-color: #00704A;
  color: white;
}

#headright {
  margin-right: 55%;
}

<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<header class="header">
  <img class="logo" src="..\WP project\Central-Perk-Emblem.png" alt="Central Perk logo">
  <div id="headright">
    <a class="button" href="#">HOME</a>
    <a class="button" href="#">MENU</a>
    <a class="button" href="#">GIFT SHOP</a>
  </div>
  <div id="headleft">
    <a class="button" href="#">Find a Store</a>
    <a class="button" href="#">Sign In</a>
    <a class="button" href="#">Join Now</a>
  </div>
</header>

Answer 1

我对边距、宽度、填充、高度进行了一些更改。

我认为问题是由于空间不足而发生的。

<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <style>
    body {
      background-color: #F0EAD6;
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 0;
    }
    
    .header {
      display: flex;
      justify-content: space-around;
      align-items: center;
      background-color: #00704A;
      color: white;
      height: 100px;
      padding: 0px 20px;
    }
    
    .logo {
      background: yellow;
      width: 106px;
      height: 64px;
      margin-right: 10px;
    }
    
    .button {
      min-width: 100px;
      display: inline-flex;
      padding: 5px 5px;
      border-radius: 20px;
      margin: 1px;
      background-color: white;
      color: #00704A;
      font-weight: bold;
      text-decoration: none;
      transition: background-color 0.19s ease, color 0.19s ease;
      justify-content: center;
    }
    
    .button:hover {
      background-color: #00704A;
      color: white;
    }
    /*#headright {
    margin-right: 55%; 
}*/
  </style>
</head>

<body>
  <header class="header">
    <img class="logo" src="..\WP project\Central-Perk-Emblem.png" alt="Central Perk logo">
    <div id="headright">
      <a class="button" href="#">HOME</a>
      <a class="button" href="#">MENU</a>
      <a class="button" href="#">GIFT SHOP</a>
    </div>
    <div id="headleft">
      <a class="button" href="#">Find a Store</a>
      <a class="button" href="#">Sign In</a>
      <a class="button" href="#">Join Now</a>
    </div>
  </header>
</body>

</html>

Answer 2

你需要在下面给你的 headright 和 headleft 因为你的容器可能有一些其他的

display

属性，因此你不能将你的按钮放入那个

display : flex;
flex-direction : row;

这应该有效。

当页面不是全屏时，我不知道如何防止 HTML 中的按钮移动

问题描述投票：0回答：2

2个回答

最新问题

当页面不是全屏时，我不知道如何防止 HTML 中的按钮移动

问题描述 投票：0回答：2

2个回答

最新问题

问题描述投票：0回答：2