CODEWITHSUNDEEP
csshtml
user2316675
user2316675

Reputation: 263

How to position few span's under each other

I want to position two span's and a button like so:

span1

span2

button

But, with my current code they look like this:

span1 span2 button

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

Upvotes: 22

Views: 70363

Answers (3)

Yatrix
Yatrix

Reputation: 13775

Can always go with flexbox,

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

Upvotes: 5

gaynorvader
gaynorvader

Reputation: 2657

Try:

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

clearing after a float will cause the span to drop to a new line. http://jsfiddle.net/aKmF6/

Upvotes: 28

Darren
Darren

Reputation: 70718

span are inline elements. If you want them positioned under each other use a block element or style it with display:block

http://jsfiddle.net/xfyS4/

Upvotes: 28

Related Questions