html - 如何防止按钮与页面上的文本重叠？

Question

我想创建一个按钮，它位于我向用户显示的消息下方。所以我有这个 HTML

      <div id="userNotificationsWrapper">

<p>You have no notifications.</p> 

<div><a id="createBtn" data-method="get" href="/user_notifications/new">Create Notification</a></div> 

</div>

然后我的按钮(链接)有了这个样式 ...

#createBtn {
  margin-bottom: 20px;
  padding: 15px;
  border-radius: 5px;
  border: 1px solid #7ac9b7;
  background-color: #4180C5;
  color: aliceblue;
  text-decoration: none;
  font-size: 15px;
  cursor: pointer;
}

#createBtn:hover {
  background-color: black;
}

但是如果你看我的演示 -- https://jsfiddle.net/7rxdh37h/ ，您可以看到按钮悬停在文本上方，而不是出现在文本下方并停留在内容区域中。我不知道为什么会这样或如何解决它。有什么想法吗？

Answer 1

首先，按钮位于错误的 div 中。您需要将其移出文本 div。接下来，添加显示 block ，然后设置按钮/边距区域的大小。

https://jsfiddle.net/7rxdh37h/1/

<div id="w">
    <header id="logo">CryptoCurrency Index</header>

    <nav id="navigation">
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Member Currencies</a></li>
        <li><a href="/user_notifications/" id="notifications">My Notifications</a></li>
    <li id="logout"><a href="/logout">Log Out</a></li>
    </ul>
</nav>

<div id="content">
<div id="userNotificationsWrapper">

<p>You have no notifications.</p> 
</div>
<div class="buttonCreate">
    <a id="createBtn" data-method="get" href="/user_notifications/new">Create Notification</a></div>    
    </div>
      <footer class="footer">
  <small>
    The <a href="http://www.railstutorial.org/">Ruby on Rails Tutorial</a>
    by <a href="http://www.michaelhartl.com/">Michael Hartl</a>
  </small>
  <nav>
    <ul>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
      <li><a href="http://news.railstutorial.org/">News</a></li>
    </ul>
  </nav>
</footer>
</div>

#createBtn {
  margin-bottom: 20px;
  padding: 15px;
  display: block;
  border-radius: 5px;
  border: 1px solid #7ac9b7;
  background-color: #4180C5;
  color: aliceblue;
  text-decoration: none;
  font-size: 15px;
  cursor: pointer;
}
.buttonCreate{
  width: 30%;
  margin: 10px auto;
  display: block;
}