2个相同的按钮，在CSS和HTML完全相同的情况下，显示效果却不一样。

Question

我在同一个页面上创建了2个按钮，先创建一个，然后复制。它们应该在页面上水平居中。但由于某些原因，只有第一个按钮的位置和颜色显示正确，但第二个按钮不正确。

我是HTML和CSS的新手。我做了一个页面，有两个部分（没有使用section标签），个人肖像和家庭肖像。每个部分都应该有一个水平居中的 "现在预订 "按钮。最初，我做的是让第一个按钮正确显示，如这里的第一张图。上面有足够的空隙，而且它完全处于水平中心。为了实现水平居中，我在文档中的CSS中使用了 "margin: auto"。我不记得具体的代码是什么了。

然后我注意到第二个按钮和第一个按钮的显示方式并不完全一样，尽管代码完全一样，并且放在了包含照片拍摄信息（即所有的文字和适用的图片）的description div之外，并且在自己的行上。第二个按钮比较大，颜色要么会出血，填满整行（没有图片为证），要么根本不显示颜色，所以我编辑了代码，最后得到了这样的效果，这仍然不是我想要的（我把它弄成了红色，这样你就可以看到了，通常情况下，它是非常浅的灰色，有时第二个按钮中的颜色会填满整个行幅）。

同时，在同一页面上，第二个按钮没有显示出应有的红色。

这是代码.

<!-- HTML Code for the button starts below -->
<div class="buttons">
  <a href="contact.html">
    <div class="booknow" id="booknowbutton">
    <p><strong>Book now!</strong></p>
    </div>
  </a>
</div>
<!-- HTML Code for the button ended above -->

<!-- CSS Code for the button appearance starts below -->
<style>
.buttons {
  margin: auto;
  background-color: red;
}

.booknow {
  font-family: century gothic;
  color: #8201C2;
  text-align: center;
  border-radius: 1px;
  border: solid;
  max-width: 100px;
  padding: 10px;
}
</style>

<style>
    #booknowbutton:hover {
  background-color: #8201C2;
  color: white;
}
</style>
<!-- CSS Code for the button appearance ended above -->

在HTML文件中，我有两次按钮的HTML代码，但我只在代码中放了一次用于演示。

我把文档中的CSS写了一次，并在文档中的相应位置添加了两次按钮，以引用相同的CSS，但第二个按钮拒绝正常显示。

更复杂的是，目前的方式（没有显示：inline或block），在移动模式下，第一个按钮出现在右侧，就像下面这张图片显示的那样（如你所见，文字突出在右侧，这不是以前的做法）。

但第二个按钮仍然在中间。

如果你需要我给一个页面链接或完整的代码，请告诉我，我会想办法。我只是不想加入一个可能会过期或断裂的链接，这样别人以后就无法阅读和学习了。

我似乎无法实现的是。我想同时做到以下几点： - 所有按钮的位置相同--所有按钮正确显示（颜色和大小）--所有按钮用一套CSS控制--所有按钮水平居中--所有按钮顶部有40px左右的边距。

我可以在任何一个时间得到上述组合，但不能在同一时间一起.照片是在一个推子和已经垂直居中的div中，照片和文字是在一个 "行 "的2列和按钮应该是外面和下面的行。谢谢你

Answer 1

我看到你使用两个不同的类，"buttons "和 "booknow"。我们不需要为一个组件使用两个不同的类。而且你使用了一个id "booknowbutton"，id的使用是在CSS只需要应用于单个组件的时候，既然你已经用它来悬停，我们就可以重复使用同一个类的组件。我已经对代码做了相应的修改，并结合你的要求，你可以使用 "booknow "这个类，在任何地方使用同一个按钮。

<!-- HTML Code for the button starts below -->
<div>
  <a href="contact.html">
    <div class="booknow" >
    <p><strong>Book now!</strong></p>
    </div>
  </a>
</div>
<!-- HTML Code for the button ended above -->

<!-- CSS Code for the button appearance starts below -->
<style>
  .booknow
 {
  font-family: century gothic;
  background-color:red;
  color: #8201C2;
  text-align: center;
  border-radius: 1px;
  border: solid;
  max-width: 100px;
  padding: 10px;
  margin: 40px auto
}
.booknow:hover{
  background-color: #8201C2;
  color: white; 
}
</style>
<!-- CSS Code for the button appearance ended above -->