2 个相同的按钮显示不同，完全相同 CSS 和 HTML

Question

我通过创建一个按钮，然后复制它，在同一页面上创建了 2 个按钮。它们应该在页面上水平居中。但不知为何，只有第一个显示正确，定位和颜色正确，第二个显示不正确。

我是 HTML 和 CSS 的新手。我做了一个页面，有 2 个部分（没有使用部分标签），个人肖像和全家福。每个部分下面应该有一个水平居中的 "book now" 按钮。最初，我这样做是为了让第一个按钮正确显示，如第一张图片所示：它上方有足够的间隙，并且水平居中。为了实现水平居中，我对文档中的 CSS 使用了 "margin: auto"。我不记得具体的代码是什么了。

然后我注意到第二个按钮的显示与第一个按钮不完全相同，尽管代码完全相同，并且放置在包含照片拍摄信息的描述 div 之外（即所有文本和适用的图像）并在其自己的行中。第二个按钮更大，颜色要么渗出并填满整条线（没有图片）要么根本不显示颜色，所以我编辑了代码并最终得到了这个效果，这仍然不是什么我想要（我把它变成了红色所以你可以看到，通常它是非常浅的灰色，有时第二个按钮中的颜色会填满整个 line/span）：

同时，在完全相同的页面上，第二个按钮没有显示应有的红色：

这是代码。

<!-- 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 但第二个按钮无法正确显示。

为了让它更复杂，目前的方式（没有显示：内联或块），在移动模式下，第一个按钮出现在右侧，如下图所示（如您所见，文本在右侧突出，这不是它以前做的事情）：

但是第二个按钮仍然在中间：

如果您需要我给页面或完整代码link，请告诉我，我会想办法的。我只是不想包含一个可能会过期或损坏的 link，这样其他人以后就无法阅读和学习。

我似乎无法实现：我同时想要以下内容：
- 所有按钮位置相同 - 所有按钮显示正确（颜色和大小） - 所有按钮由一组 CSS 控制 - 所有按钮水平居中 - 所有按钮顶部有大约 40px 边距

我可以在任何时候得到以上的组合，但不能同时得到所有的。照片在推子中并且已经在其 div 中垂直居中并且照片和文本在具有 2 列的 'row' 中并且按钮应该在行的外部和下方。
谢谢

Answer 1

我看到您使用了两种不同的 classes ， "buttons" 和 "booknow" 。对于单个组件，我们不需要两个不同的 classes。并且您使用了 id "booknowbutton" ，当 CSS 仅需要应用于单个组件时使用 id，并且由于您将其用于悬停，我们可以重复使用相同的 class 零件。我已经根据您的要求对代码进行了相应的更改，您可以使用 class "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 -->

2 个相同的按钮显示不同，完全相同 CSS 和 HTML

2 identical buttons display differently with exact same CSS and HTML

html

css

button

alignment