显示器分辨率不同时按钮移动

Question

你好，今天我正在为我的网站制作新布局，我正在向 header 添加按钮，但这种情况发生了（这是我的第一个屏幕 1920x1080 的屏幕截图，按钮将正常显示）

还有我的第二个屏幕 (1360x768)

#header {
background:#CCC;
width:100%;
height:58px;
background-size: cover;
background-attachment: fixed;
display:inline-block;}


.buttons {
margin-left:800px;
    position:relative;

}

#button a {
font-family:Trebuchet MS;
text-decoration:none;
color:#fff;
font-size:30px;
display:inline-block;
padding:8px 10px;
display:inline-block;
position:relative;

}

Answer 1

您应该使用媒体查询为不同的分辨率更改字体大小。示例：

@media (min-width: 1300px) and (max-width: 1600px) {
#button a {
font-size: 20px;
} 
}

Answer 2

你实际上是在说：用完所有必要的 space 并在左侧留出 800px 的边距。一旦屏幕尺寸足够小以至于您的文本 + 800px 边距不适合，它就会掉到另一行。

    .buttons {
      margin-left:800px;
      position:relative;
     }

使 div 尽可能宽，并将其浮动在右侧。如果您的 div 低于您设置的限制，它将再次掉落到另一条线上，因为它没有足够的 space 放在一条线上。这就是文本格式的规则。

    .buttons {
     width: 800px; // change so your buttons are on one line
     margin-right: 25px;
     float: right; 
     }

如果您希望它适合更小的屏幕，您可以使用@media 规则修改行为。

     @media screen and (max-width: 768px){
     .buttons {font-size: 0.8em;}
     }

显示器分辨率不同时按钮移动

Buttons moving when different resolution on monitor

html

css

resolution

screen

button