Question

我想弄明白这一点。我的目标是让两个buttons ... yes和no按钮在文本下方显示。我可以更改html ofcourse，但我希望/需要使用仅限CSS 。可能的？

.box {
  background-color: yellow;
 }
 
.yes {
  background-color: green;
  padding: 10px;
 }
 
.no {
  background-color: red;
  padding: 10px;
 }

<div class="box">
<button class="yes"><span>yes</span></button>
<button class="no"><span>no</span></button>
Here you can vote
</div>

Answer 1

我不喜欢在任何事情上使用.box，除非绝对必要，或者您确切知道自己在做什么。相反，您可以将按钮包装在另一个容器中，然后使column成为一个方向为.box { background-color: yellow; display: flex; flex-direction: column; } .yes { background-color: green; padding: 10px; } .no { background-color: red; padding: 10px; }的弹性容器。像这样：

＆＃13;

<div class="box">

  <div class="btn-wrapper">
    <button class="yes"><span>yes</span></button>
    <button class="no"><span>no</span></button>
  </div>
  
  Here you can vote
</div>

＆＃13;

this.eyes

＆＃13;

小提琴：https://jsfiddle.net/1yz4gfdv/

Answer 2

将您的按钮包裹在<div>

中

＆＃13;

.box {
  background-color: yellow;
}

.yes {
  background-color: green;
  padding: 10px;
}

.no {
  background-color: red;
  padding: 10px;
}

＆＃13;

<div class="box">
  Here you can vote
  <div>
  <button class="yes"><span>yes</span></button>
  <button class="no"><span>no</span></button>
  </div>
</div>

＆＃13;

您期待的CSS方式

＆＃13;

.box {
  background-color: yellow;
  height: 30px;
  line-height: 30px;
}

.yes {
  background-color: green;
  padding: 10px;
  top: 40px;
  position: absolute;
}

.no {
  background-color: red;
  padding: 10px;
  top: 40px;
  left: 50px;
  position: absolute;
}

＆＃13;

<div class="box">

  <button class="yes"><span>yes</span></button>
  <button class="no"><span>no</span></button> Here you can vote
</div>

＆＃13;

Answer 3

根本没有编辑HTML，你确实可以使用CSS移动下面的按钮（尽管编辑你的HTML会最简单）。像这样的东西会起作用：

.box {
  background-color: yellow;
  overflow: auto;
  height: 100px;
  position: relative;
}

.yes {
  background-color: green;
  padding: 10px;
}

.no {
  background-color: red;
  padding: 10px;
  left: 50px;
 }

button {
  position: absolute;
  top: 30px;
}

Answer 4

首先，你可以使用float：right属性来向右浮动2个按钮“是”和“否”。

第二件事，您可以使用margin-top向下移动2个按钮“是”和“否”到文本的底部。

第三件事，您可以使用左侧位置设置左侧这两个按钮的宽度。

最后，您可以使用position绝对属性来固定这两个按钮的位置。

希望它有所帮助，尊重！

.box {
  background-color: yellow;
 }
 
.yes {
  background-color: green;
  padding: 10px;
  float: right;
  margin-top: 52px;
  left: 0;
  position: absolute;
 }
 
.no {
  background-color: red;
  padding: 10px;
  float: right;
  margin-top: 52px;
  left: 40px;
  position: absolute;
 }

<div class="box">
<button class="yes"><span>yes</span></button>
<button class="no"><span>no</span></button>
Here you can vote
</div>

移动文本下方的按钮

4 个答案:

您期待的CSS方式