html - 如何将我的 CSS 按钮完全保留在其父 DIV 中？

Question

我无法在我的内容区域中保留自定义链接。我有这个 HTML

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

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

但是链接/按钮一直越过我的内容区域的底部边界(id="userNotificationsWrapper"的 DIV)。我希望内容区域完全捕获链接/按钮，并且我希望它在我的消息之后排在下一行。

我创建了一个 Fiddle 来演示我的问题 -- https://jsfiddle.net/b3hxko01/ .

Answer 1

你有两个问题。首先是 width: calc(100% - 750px); 在 #userNotificationsWrapper 上。您可能想将其替换为 max-width: 220px 或类似的...？

第二个是 width: 100%; 在 #createBtn 上。我会将其替换为:

#createBtn {
  display: inline-block;
  box-sizing: border-box;
  margin-right: 10px;
  width: calc(100% - 20px);
}

你的 updated fiddle .最后添加了我的 CSS。没碰过你的随意搜索每个 Prop 并查看它们的作用。