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

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/