如何确定移动视图按钮的大小

Question

我希望按钮的大小对于移动视图应该是固定的，但对于窗口应该是自动的。我该怎么办，请帮忙？或者应将其自动放置在中间。我正在使用此代码。我正在使用这样的CSS。

 .button1 {
border: 2px solid rgb(0, 0, 0);
box-sizing: inherit; 
background-color: #ffffff; 
margin-right: 1.7px; 
color: black; 
font-size: 18px;
font-weight: 980;
padding: 6px 42px;
text-align: center;
transition: all 0.3s ease-in-out 0s;
width: 96.6px;
text-decoration: none;
line-height: 22px; 
font-size: 16px;
font-family: domine;
display: inline-table;
}

  .button2 { 
border: 2px solid rgb(255, 87, 51);
background-color: #FF5733;
box-sizing: inherit;
margin-right: 1.7px; 
color: white; 
font-size: 18px;
font-weight: 980;
padding: 6px 42px;
text-align: center;
transition: all 0.3s ease-in-out 0s;
width: 96.6px;
text-decoration: none;
line-height: 22px; 
font-size: 16px;
font-family: domine;
display: inline-table;}
 
  .button2 a:link, .button2 a:visited {
  background-color: #FF5733;
  color: white;
  text-decoration: none;

}

.button2 a:hover, .button2 a:active {
  background-color: #FF5733;
  color:#000000;
}
@media screen and (max-width: 680px) and (min-width:0px){
.button2 { padding: 6px 32px;width: 85px;display: inline-table;max-height:80px;
 }
 .button1 {  padding: 6px 32px;width: 85px;max-height:88px;}
}}

<button style="margin:auto"class="button button1">BUY NOW</button><button  style="margin:auto;"  class="button button2">DETALS</button>

Answer 1

问题可能是您在HTML页面的嵌入式CSS中将按钮样式设置为自动吗？这将覆盖您在CSS页面中设置的边距。也许这影响了按钮的显示方式，因为媒体查询看起来不错。我真的希望这会有所帮助。祝你好运！