CSS 样式“float:left”阻碍了锚标签 <a> 的使用。不可点击

Question

我要做的是在彼此旁边排列 3 个 div 标签。所有 3 个 div 都包括锚标签、标题和 标签。但是当我使用与 div "float: left" 相关的样式时，按钮变得不可点击，以及任何 css 样式为 "class:hover" 都不会与之交互。

当我保持浮动 css 样式时，它仍然是它想要的外观。但在交互上却达不到预期的效果。

当我放下样式浮动时，交互是所需的，但外观与所需的结果相差甚远，即将它们排列在一起并居中。

我已尝试一一删除所有样式，这可能会导致锚标记出现问题，但似乎只有 float-left 会导致问题

这里是相关的html代码。

.button {
  transition: background-color 0.35s ease-in-out, color 0.35s ease-in-out, border-color 0.35s ease-in-out;
  display: inline-block;
  background: none;
  border: 2px solid #f1b24a;
  border-radius: 8px;
  letter-spacing: 2px;
  padding: 0.85em 2.75em 0.85em 2.75em;
  color: #FFF !important;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
}

<div style="float: left; margin-bottom: 15px;">
  <header>
    <h2 style="font-weight: bold; color: #f1b24a;">Heading</h2>
  </header>
  <p style="color: #f1b24a;">Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br> Curabitur sit amet egestas eros. Sed venenatis est nunc, id<br> convallis tellus venenatis non. Proin id nisi euismod,<br> molestie nisl vel, accumsan sem. Integer felis sem, lacinia<br> eu
    auctor eget, dapibus feugiat elit. Duis lectus justo,<br> ultrices ac placerat non, sollicitudin at massa.
  </p>
  <a href="Index.html" class="button" onmouseover="colorSwitch()">More</a>
</div>

<div style="float: left; margin-bottom: 15px; margin-left: 65px;">
  <header>
    <h2 style="font-weight: bold; color: #f1b24a;">Heading</h2>
  </header>
  <p style="color: #f1b24a;">Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br> Curabitur sit amet egestas eros. Sed venenatis est nunc, id<br> convallis tellus venenatis non. Proin id nisi euismod,<br> molestie nisl vel, accumsan sem. Integer felis sem, lacinia<br> eu
    auctor eget, dapibus feugiat elit. Duis lectus justo,<br> ultrices ac placerat non, sollicitudin at massa.
  </p>
  <a onmouseover="colorSwitch()" href="Index.html" class="button">More</a>
</div>

<div style="float: left; margin-bottom: 15px; margin-left: 60px;">
  <header>
    <h2 style="font-weight: bold; color: #f1b24a;">Heading</h2>
  </header>
  <p style="color: #f1b24a;">Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br> Curabitur sit amet egestas eros. Sed venenatis est nunc, id<br> convallis tellus venenatis non. Proin id nisi euismod,<br> molestie nisl vel, accumsan sem. Integer felis sem, lacinia<br> eu
    auctor eget, dapibus feugiat elit. Duis lectus justo,<br> ultrices ac placerat non, sollicitudin at massa.
  </p>
  <a href="Index.html" class="button" onmouseover="colorSwitch()">More</a>
</div>

Answer 1

我创建了您尝试这样做的代码，希望对您有所帮助（我使用 Flexbox 而不是浮动）

HTML 代码

 <div class="container">
    <div  class="div1">
        <header>
          <h2 >Heading</h2>
        </header>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br> Curabitur sit amet egestas eros. Sed venenatis est nunc, id<br> convallis tellus venenatis non. Proin id nisi euismod,<br> molestie nisl vel, accumsan sem. Integer felis sem, lacinia<br> eu
          auctor eget, dapibus feugiat elit. Duis lectus justo,<br> ultrices ac placerat non, sollicitudin at massa.
        </p>
        <a href="Index.html" class="button">More</a>
      </div>
      
      <div  class="div2">
        <header>
          <h2 >Heading</h2>
        </header>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br> Curabitur sit amet egestas eros. Sed venenatis est nunc, id<br> convallis tellus venenatis non. Proin id nisi euismod,<br> molestie nisl vel, accumsan sem. Integer felis sem, lacinia<br> eu
          auctor eget, dapibus feugiat elit. Duis lectus justo,<br> ultrices ac placerat non, sollicitudin at massa.
        </p>
        <a href="Index.html" class="button">More</a>
      </div>
      <div  class="div3">
        <header>
          <h2 >Heading</h2>
        </header>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br> Curabitur sit amet egestas eros. Sed venenatis est nunc, id<br> convallis tellus venenatis non. Proin id nisi euismod,<br> molestie nisl vel, accumsan sem. Integer felis sem, lacinia<br> eu
          auctor eget, dapibus feugiat elit. Duis lectus justo,<br> ultrices ac placerat non, sollicitudin at massa.
        </p>
        <a href="Index.html" class="button">More</a>
      </div>

CSS 代码

 .container{
    display: flex;
    justify-content: center;
    align-items: center;
}
.container div{
    margin: 15px;
}
.container div h2{
    font-weight: bold;
    color: #f1b24a ;
}
.container div p{
    color: #f1b24a;
}
.container div a{
    transition: background-color 0.35s ease-in-out, color 0.35s ease-in-out, border-color 0.35s ease-in-out;
    display: inline-block;
    background: none;
    border: 2px solid #f1b24a;
    border-radius: 8px;
    letter-spacing: 2px;
    padding: 0.85em 2.75em 0.85em 2.75em;
    color: rgb(177, 187, 44) !important;
    text-transform: uppercase;
    text-decoration: none;
    text-align: center;
}