Question

我正在为桌面和移动用户制作网站（使用wordpress）。我把4个“按钮”放在一起，但问题是当屏幕分辨率较小的用户（即使用手机在网站上连接的用户）按钮调整大小并且看起来很难看。如果它们不能适合屏幕，有没有办法将这些按钮放在另一个旁边？这是我用于4个按钮的CSS：

#downloadButton1{
  border-radius: 10px 10px 10px 10px; 
  -moz-border-radius: 10px 10px 10px 10px; 
  -webkit-border-radius: 10px 10px 10px 10px;
  background:url('download-button1.png') no-repeat;
  background-position: center center;
  display:block;
  width: 30%;
  height:65px;
}
#downloadButton2{
margin-left:35%;
margin-top:-65px;
 background:url('download-button2.png') no-repeat;
  border-radius: 10px 10px 10px 10px; 
  -moz-border-radius: 10px 10px 10px 10px; 
  -webkit-border-radius: 10px 10px 10px 10px;
  background-position: center center;
  display:block;
  width: 20%;
  height:65px;
}
#downloadButton3{
margin-left:58.5%;
margin-top:-65px;
 background:url('download-button3.png') no-repeat;
  border-radius: 10px 10px 10px 10px; 
  -moz-border-radius: 10px 10px 10px 10px; 
  -webkit-border-radius: 10px 10px 10px 10px;
  background-position: center center;
  display:block;
  width: 20%;
  height:65px;
}
#downloadButton4{
margin-left:81%;
margin-top:-65px;
 background:url('download-button4or.png') no-repeat;
  border-radius: 10px 10px 10px 10px; 
  -moz-border-radius: 10px 10px 10px 10px; 
  -webkit-border-radius: 10px 10px 10px 10px;
  background-position: center center;
  display:block;
  width: 20%;
  height:65px;

}

Answer 1

由于按钮宽度是使用百分比设置的，因此它们将始终缩小以适合其容器。如果删除宽度声明并使用左/右填充，则不适合容器的按钮将下降到下一行。

保证金左声明似乎也是不必要的。不太清楚你为什么包括那些;如果删除边距/宽度声明不起作用，查看HTML以查看上下文中的按钮会很有帮助。

如果按钮（或div）不能适合屏幕分辨率，请将它们一个放在另一个下面

1 个答案: