Question

我在内容区域保留自定义链接时遇到问题。我有这个HTML

＆＃13;

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

＆＃13;

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

＆＃13;

但链接/按钮继续越过我的内容区域的底部边界（ID为＆＃34的DIV; userNotificationsWrapper＆＃34;）。我希望内容区域完全捕获链接/按钮，我希望它在我的消息之后排在下一行。

我创建了一个小提琴来演示我的问题 - 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最后添加了。没碰过你的。随意搜索每个道具，看看他们做了什么。

Answer 2

你想要这样的东西吗？ Demo

如果没有附上它的截图，请

这里是css

#userNotificationsWrapper {
 margin: 0 auto;
background-color: #ffffff;
border: 1px solid #C7CDD1;
width: 75%;
font-family: Acme;
font-size: 18px;
height:100px;
padding-left: 10px;

}

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

2 个答案: