0

我正在为桌面和移动用户制作网站（使用 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;

}
4

1 回答 1

0

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

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

于 2013-08-21T16:54:37.983 回答