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

Question

标签： htmlcss

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;
}