css - 如何将几个跨度放置在彼此下方

Question

我想定位两个跨度和一个按钮，如下所示：

跨度1

跨度2

按钮

但是，使用我当前的代码，它们看起来像这样：

span1 span2 按钮

body {
text-align:center;
}
span#printHere {
color:black;
font-size:30px;
position:relative;
}
span#triesLeft{
align='centre';
font-size:30px;
position:relative;
}

Answer 1

span是内联元素。如果您希望它们位于彼此下方，请使用块元素或使用display:block

http://jsfiddle.net/xfyS4/

Answer 2

尝试：

span {
  float: left;
  clear: left;
}
button {
  float: left;
  clear: left;
}
button:hover {
  background-image: url('imageurl');
}

浮动后清除将导致跨度下降到新行。 http://jsfiddle.net/aKmF6/

Answer 3

总是可以使用 flexbox，

<div style="display:flex; flex-direction:column">
  <span>Hello</span>
  <span>there,</span>
  <span>span!</span>
</div>