Question

我需要两个主按钮具有相同的大小，但我仍然是Web开发的新手，所以我一无所知。我目前有以下HTML和CSS用于index.html

<body>
<div>
    <img src="img/projectfly-logo.svg">
    <p class="center">We're upgrading!</p>
    <div class="center">
        <a href="#"><h1 class="button1"><i class="fas fa-bell"></i> Update</h1></a>
        <h1 class="button2"><a href="#"><i class="fab fa-paypal"></i> Support the project</a></h1>
    <div>
</div>

然后创建一个中心类和2个不同的按钮类。

.button1 {
    padding: 20px 60px;
    background-color: #00B056;
    border-radius: 300px;
    display: inline-block;
}

.button2 {
    padding: 20px 60px;
    background-color: grey;
    border-radius: 300px;
    display: inline-block;
}

.center{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}

这是输出： https://leonisgeweldig.be/stackoverflow/

Answer 1

您可以为类添加宽度和对齐中心：

.button1 {
    padding: 20px 60px;
    background-color: #00B056;
    border-radius: 300px;
    display: inline-block;
    width: 300px;
    text-align: center;
}

.button2 {
    padding: 20px 60px;
    background-color: grey;
    border-radius: 300px;
    display: inline-block;
    width: 300px;
    text-align: center;
}

Answer 2

同时给两个按钮width并减小font-size

.button1 {
    padding: 20px 60px;
    background-color: #00B056;
    border-radius: 300px;
    display: inline-block;
    width: 100px;
    font-size: 10px;
}

.button2 {
    padding: 20px 60px;
    background-color: grey;
    border-radius: 300px;
    display: inline-block;
    width: 100px;
    font-size: 10px;
}

.container{
    position: relative;
}

.center{
    position: absolute;
    top: 50%;
    left: calc(50% - 210px);
    color: white;
}

<body>
  <div class="container">
      <img height="100%" width="100%" src="https://images.pexels.com/photos/1254140/pexels-photo-1254140.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">
      <p class="center">We're upgrading!</p>
      <div class="center">
          <a href="#"><h1 class="button1"><i class="fas fa-bell"></i> Update</h1></a>
          <h1 class="button2"><a href="#"><i class="fab fa-paypal"></i> Support the project</a></h1>
      </div>
  </div>
</body>

Answer 3

.button1 {
    padding: 20px 60px;
    background-color: #00B056;
    border-radius: 300px;
    width: 100px;
    font-size: 11px;
}
a{text-decoration:none;}
.button2 {
    padding: 20px 60px;
    background-color: grey;
    border-radius: 300px;
    width: 100px;
    font-size: 11px;
}

.center{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}

<div>
    <img src="img/projectfly-logo.svg">
    <p class="center">We're upgrading!</p>
    <div class="center">
        <a href="#"><h1 class="button1"><i class="fas fa-bell"></i> Update</h1></a>
        <h1 class="button2"><a href="#"><i class="fab fa-paypal"></i> Support the project</a></h1>
    <div>
</div>

Answer 4

避免使用内联元素包装块级元素。
您还可以为这两个按钮定义通用按钮类，并添加另一个定义的类区分背景颜色。
因此您可以编写HTML和CSS的更多语义为：

.button{
    padding: 20px;
    background-color: #00B056;
    border-radius: 300px;
    display: inline-block;
    width: 150px;
    text-align:center;
    margin:0 10px;
    color: #fff;
    text-decoration: none;
 }
 
 .background-grey{
    background: grey
 }
 
 .center{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}

<p class="center">We're upgrading!</p>
    <div class="center">
        <a href="#" class="button">
          <i class="fas fa-bell"></i>
          <span> Update</span>
         </a>
        <a href="#" class="button background-grey">
          <i class="fab fa-paypal"></i>
          <span> Support the project<span>
         </a>
    <div>

Answer 5

只需给他们相同的宽度。

.button1,
.button2 {
  min-width: 250px !important;
  text-align: center;
  font-size: 18px;
  margin: 10px 15px;
  box-sizing: content-box;
}

.button1 {
  padding: 20px 60px;
  background-color: #00B056 !important;
  border-radius: 300px;
  display: inline-block;
}

.button2 {
  padding: 20px 60px;
  background-color: grey;
  border-radius: 300px;
  display: inline-block;
}

.center {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}

a {
  text-decoration: none;
  color: white;
}

<p class="center">We're upgrading!</p>
<div class="center">
  <a href="#">
    <h1 class="button1"><i class="fas fa-bell" aria-hidden="true"></i> Update</h1>
  </a>
  <h1 class="button2"><a href="#"><i class="fab fa-paypal" aria-hidden="true"></i> Support the project</a></h1>
  <div>
  </div>

</div>
<div>

如何使一个盒子大小相同？

5 个答案: