Question

我正在开发一个简单的网站，每当我调整窗口大小时，顶部栏上的按钮都会在第一行下方向下滑动。我不知道如何解决它。我尝试了很多解决方案，例如：

body {
width:100%;
height:100%;
}

但没有任何作用。有人可以告诉我如何让我的页面调整到人们的窗口大小或使其静态，所以当它调整它只是切断它的一部分？这是我的代码：

  <html>
  <head>
  <style>
    #button_container {
     width:100%;
        height: 100%;
    }

     body {
     width:100%;
        height:100%;
        position: absolute;
    }


        #title {
        width:100%;
        height: 10%;
    font-family: ecuyerDAX;
        font-size: 55px;
        margin-top:-60px;
        margin-left: 28%;
    color:white;
    }

        button {
            text-transform: uppercase;
            font-family: optimus-princeps;
            outline: none;
            border-radius: 3px;
       margin-top:1%;
       color:white;
            background: gray;
       border:1px solid black;
       height:50%;
   margin-left: 1%;
        margin-right: 1%;
    background: -webkit-linear-gradient(gray, black);
        background: linear-gradient(gray,black);
        }
    #bThree {
     margin-right:55%;

    }
#topBar {
    border: 2px solid black;
    border-radius: 5px;
 height: 12%;
    width:100%;
    background:-webkit-linear-gradient(#20AB53, #0B6F15);  
    background: linear-gradient(#20AB53, #0B6F15);
 } 
 </style>
 </head>
 <body>
  <div id="topBar">
  <div id="button_container">
    <button id="bOne">Home</button>
    <button id="bTwo">About</button>
    <button id="bThree">Contact</button>
     <button id="bFour">Log In</button>
     <button id="bFive">Sign Up</button>
       </div>
  </div>
  </body>
  </html>

Answer 1

尝试在px或em中使用固定值，而不是宽度属性的百分比。它们没有响应，并且在屏幕宽度改变时不会改变宽度。

Answer 2

要阻止它变得太小，您可以设置容器的最小宽度。如果空间变小，这将使内容被切断。

min-width: 1000px;

如果你想让它变得敏感，那么通过使用媒体查询或者更灵活的插板会更容易，这将更加棘手。

Answer 3

你的按钮在px中的宽度是固定的，因此随着宽度变小，按钮占用的空间越来越大，直到它们最终不适合并且需要包裹。

如果你的按钮是一个百分比宽度，他们不会换行，虽然这不是一个好的解决方案。

我认为做一个浮动：对于右手，两个会阻止他们这么早地包裹（浮动：左手三个）。虽然左手和右手相遇但他们仍会缠绕。

Answer 4

给#bThree保证金 - 权利不是好主意。您可以将其替换为#bFour, #bFive { float: right; }

可以在一个属性中指定所有边距属性：margin: top right bottom left。作为示例，您可以将其更改为：margin: 1% 1% 0 1%或margin: 1% 1% 0。谷歌搜索＆＃34;速记属性＆＃34;有关更多解释。

＆＃13;

body {
  width:100%;
  height:100%;
  position: absolute;
  margin: 0;
}
#topBar {
  border: 2px solid black;
  border-radius: 5px;
  background: -webkit-linear-gradient(#20AB53, #0B6F15);  
  background: linear-gradient(#20AB53, #0B6F15);
}
button {
  text-transform: uppercase;
  font-family: optimus-princeps;
  outline: none;
  border-radius: 3px;
  margin: 1%;
  color:white;
  background: gray;
  border:1px solid black;
  line-height: 25px;
  background: -webkit-linear-gradient(gray, black);
  background: linear-gradient(gray,black);
}
#bFour, #bFive {
  float: right;
}

＆＃13;

<div id="topBar">
  <div id="button_container">
    <button id="bOne">Home</button>
    <button id="bTwo">About</button>
    <button id="bThree">Contact</button>
    <button id="bFour">Log In</button>
    <button id="bFive">Sign Up</button>
  </div>
</div>

＆＃13;

调整窗口大小时，如何使网页停止格式化？

4 个答案: