如何将按钮移动到我的 div 框的右下角？ [复制]答案

【问题标题】：How to move the button to the right-bottom of my div box? [duplicate]如何将按钮移动到我的 div 框的右下角？ [复制]
【发布时间】：2021-02-13 10:30:09
【问题描述】：

我正在努力寻找一种将按钮移动到 div 父框右下角的方法。我试过float: right; 然后，它被移到了 div 框的外面。如何将框中的按钮移动到右下角？如果你知道，请解释为什么 float:right;使按钮开箱即用！

.color {
  border: 1px solid black;
  width: 70%;
  margin: 10px auto;
  padding: 0 30px;
  position: relative;
}

.color p {
  display: inline-block;
  width: 200px;
  height: 80px;
  margin-right: 10px;
  text-align: center;
  line-height: 78px;
}

p.black {
  background: black;
  color: white;
}

p.gray {
  background: gray;
  color: white;
}

p.blue {
  background: blue;
  color: white;
}

p.white {
  border: 1px solid black;
}

.btn a {
  display: inline-block;
  border: 1px solid black;
  color: black;
  padding: 10px;
  margin: 10px 0;
  text-decoration: none;
  font-size: 90%;
  font-weight: 700;
  border-radius: 50px;
  text-align: center;
  box-shadow: inset 0 0 0 0 #000000;
  transition: ease-out .2s;
}

.color .btn a:hover {
  box-shadow: inset 133px 0 0 0 #000000;
  color: white;
}

<div class="color">
  <h1 class="heading">Color</h1>
  <p class="black">black</p>
  <p class="gray">gray</p>
  <p class="white">white</p>
  <p class="blue">blue</p>
  <div class="btn"><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/color_value" target="_blank">See more colors</a></div>
</div>

【问题讨论】：

标签： html css

【解决方案1】：

对此有很多解决方案。这里最简单的就是说 text-align:right

.color .btn {
text-align: right;
}

.color {
  border: 1px solid black;
  width: 70%;
  margin: 10px auto;
  padding: 0 30px;
  position: relative;
}

.color p {
  display: inline-block;
  width: 200px;
  height: 80px;
  margin-right: 10px;
  text-align: center;
  line-height: 78px;
}

p.black {
  background: black;
  color: white;
}

p.gray {
  background: gray;
  color: white;
}

p.blue {
  background: blue;
  color: white;
}

p.white {
  border: 1px solid black;
}

.color .btn {
text-align: right;
}


.btn a {
  display: inline-block;
  border: 1px solid black;
  color: black;
  padding: 10px;
  margin: 10px 0;
  text-decoration: none;
  font-size: 90%;
  font-weight: 700;
  border-radius: 50px;
  text-align: center;
  box-shadow: inset 0 0 0 0 #000000;
  transition: ease-out .2s;
}

.color .btn a:hover {
  box-shadow: inset 133px 0 0 0 #000000;
  color: white;
}

<div class="color">
  <h1 class="heading">Color</h1>
  <p class="black">black</p>
  <p class="gray">gray</p>
  <p class="white">white</p>
  <p class="blue">blue</p>
  <div class="btn"><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/color_value" target="_blank">See more colors</a></div>
</div>

【讨论】：

非常感谢！但是你能解释一下为什么我必须在这里使用 text-align 属性吗？
您也可以在 .color .btn 中使用 float: right，但我认为这不是您想要的，它会在段落旁边设置按钮。这里有一篇了解浮点数的好文章css-tricks.com/almanac/properties/f/float/….
我明白了。还有一件事，我如何使用代码 sn-p ？对不起，我是新来的
您可以进入您的帖子并单击添加图片图标旁边的图标。在打开的窗口中，您有 4 个用于 html css javascript 和输出区域的框。复制粘贴你的代码，然后你可以点击运行

【解决方案2】：

这个例子如果你想把按钮放在边框外面的右边：

.color {
  border: 1px solid black;
  width: 70%;
  margin: 10px auto;
  padding: 0 20px;
  position: relative;
}

.color p {
  display: inline-block;
  width: 200px;
  height: 80px;
  margin-right: 10px;
  text-align: center;
  line-height: 78px;
}

p.black {
  background: black;
  color: white;
}

p.gray {
  background: gray;
  color: white;
}

p.blue {
  background: blue;
  color: white;
}

p.white {
  border: 1px solid black;
}

.btn a {
  display: inline-block;
  float:right;
  border: 1px solid black;
  color: black;
  padding: 10px;
  margin: 10px 0;
  text-decoration: none;
  font-size: 90%;
  font-weight: 700;
  border-radius: 50px;
  text-align: center;
  box-shadow: inset 0 0 0 0 #000000;
  transition: ease-out .2s;
}


.color .btn a:hover {
  box-shadow: inset 133px 0 0 0 #000000;
  color: white;
}

<div class="color">
  <h1 class="heading">Color</h1>
  <p class="black">black</p>
  <p class="gray">gray</p>
  <p class="white">white</p>
  <p class="blue">blue</p>
  <div class="btn "><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/color_value" target="_blank">See more colors</a></div>
</div>

【讨论】：

【解决方案3】：

如果我没看错，您的父元素是 .color？比你做了好事postion:relative property，现在你要做的就是给你的按钮position:absolute 并使用属性bottom: value 和right: value 设置它的位置。当您将postion:relative 设置为父元素时，绝对定位在其中的所有内容都将相对于父元素移动，因此它永远不会超出框：D

并且使用浮动在页面上定位 smth 不再是好方法，请查看 flexbox 或网格（对于更复杂的布局）。 Float 使它开箱即用，因为它将它从文档流中取出，并且不再与 body 标签中的任何其他框相关：D

【讨论】：

这将永远有效