CODEWITHSUNDEEP
htmlcss
sveatch42
sveatch42

Reputation: 689

HTML position UL to share the same line with other spans

If you look at this jsFiddle example: http://jsfiddle.net/jrXwf/1/

You will see the UL tag displaying a star rating, with text below it on the next line.

Is there any way to get everything on one line?

Thanks

Upvotes: 0

Views: 2460

Answers (4)

Tim M.
Tim M.

Reputation: 54377

http://jsfiddle.net/jrXwf/5/

Add display: inline-block to your unordered list (or any other element that you want to behave that way). You could also float the element, but inline-block probably best represents what you want to accomplish with a minimum amount of hassle. You want to display the element inline, and you want it to have a display box which behaves like a block element (thus inline-block versus inline).

Your overall markup structure could/should be modified. As others have pointed out, nesting a SPAN inside UL is not legal. You also have a fairly complex structure that could possibly be simplified to use fewer elements.

Upvotes: 0

Shailender Arora
Shailender Arora

Reputation: 7778

just use float left in your this class .any-rating { float:left; }

or

here is the fiddle : http://jsfiddle.net/jrXwf/15/

Upvotes: 1

Nemoy
Nemoy

Reputation: 3427

Add Style display : inline-block to ul with class any-rating

ul.any-rating.rating {
  display:inline-block;
}​

here is the fiddle http://jsfiddle.net/jrXwf/12/

Upvotes: 0

Joseph
Joseph

Reputation: 119847

first, remove the <span> surrounding that <ul> because it's illegal. you can't place a block-level element in an inline-level element.

then, style the <ul> with either

  • display:inline-block
  • float:left

Upvotes: 0

Related Questions