Question

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

SPAN1

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

如何将几个跨度放在彼此之下

3 个答案: