0

I have a code like

<span ><img src="xxx.png">Tab1</span><span ><img src="yyy.png">Tab2</span>

This code creates two tab but the only problem is that tab1/tab2 and image xxx/yyy are in same line.I want them to be in different line and i want both span element in same line. The tabs should look like this

enter image description here

Community
  • 1
  • 1
Michelle Smith
  • 1,123
  • 2
  • 10
  • 17

3 Answers3

2

Float:left property of css would be beneficial in doing your work

0

You may be using the wrong element. <span> is use for inline content, whereas <div> may be better suited to what you're trying to do. You want them on a new line, but span is specifically created/used for non-line breaking items.

Try this:

<div><img src="xxx.png">Tab1</div><div><img src="yyy.png">Tab2</div>

More info on What is the difference between HTML tags <div> and <span>?

Community
  • 1
  • 1
p.campbell
  • 98,673
  • 67
  • 256
  • 322
  • div will place both tabs in two lines and the image and text will still be in same line – Michelle Smith Apr 08 '12 at 17:04
  • That doesn't mean that your usage of `span` goes against its intended use. Your question is misleading/confusing to the reader. Edit your question to CLEARLY state what effect you want. Include a screenshot/mockup if necessary. From what I read, you wanted 2 tabs (consisting of an img and text) on 2 lines. – p.campbell Apr 08 '12 at 17:05
0

I take the markup for granted:

img { display: block; }
span { float: left; }
roger
  • 271
  • 1
  • 7
  • If you can set the image's width it would be a better solution to use this rule: img { display: block; width: 20px; margin: 0 auto; } – roger Apr 08 '12 at 17:17