我已经看过一些解决方案，但我很确定我无法正确编码。每当我使用“display:block”时，按钮垂直显示，但可点击区域具有 100% 宽度，当我使用“display:inline-block”时，按钮不会垂直显示，但消除了 100% 宽度问题。
HTML：
<body style="margin: 0;">
<div class="banner">
<a href="http://127.0.0.1:5500/Homepage.html">
<!-- <button type="button" class="logo"><img src="Logo.png"/></button> -->
</a>
<div class="center-buttongroup">
<a style="text-decoration: none;" href="http://127.0.0.1:5500/Simulator.html">
<button class="buttonone">one</button>
</a>
<a style="text-decoration: none;" href="http://127.0.0.1:5500/Websites.html">
<button class="buttonone">two</button>
</a>
</div>
</div>
</body>
CSS：
.center-buttongroup{
padding-top: 15%;
text-align: center;
position: relative;
display:table;
}
.buttonone{
display:table;
float:left;
clear:left;
cursor: pointer;
border: none;
padding: 20px 80px;
font-size: 30px;
margin-top: 50px;
border-radius: 8px;
background-color: #277fe3;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2), 0 4px 10px 0 rgba(0,0,0,0.0.2);
color:white;
}
.buttonone:hover {background-color: #1c5693}```
I've tried using
display:table;
float:left;
clear:left;
but I can't seem to center the buttons and now I'm lost.
output (https://i.stack.imgur.com/HeHVM.png)
I am a beginner please bare with me
将你的 CSS 更新为此
.center-buttongroup {
padding-top: 15%;
text-align: center;
position: relative;
display: table;
width: 100%; /* add this*/
}
.buttonone {
/* remove float */
clear: left;
display: table;
text-decoration: none;
cursor: pointer;
border: none;
padding: 20px 80px;
font-size: 30px;
margin: 50px auto 0; /* replace your margin-top with this */
border-radius: 8px;
background-color: #277fe3;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 4px 10px 0 rgba(0, 0, 0, 0.0.2);
color: white;
}
.buttonone:hover {
background-color: #1c5693
}
您可以将按钮样式应用到“a”标签，如下所示
<a class="buttonone" href="http://127.0.0.1:5500/Simulator.html">one</a>
<a class="buttonone" href="http://127.0.0.1:5500/Websites.html">two</a>