 | |
float a SPAN to the right in a LI
Cascading Style Sheets Layout/presentation on the WWW (comp.infosystems.www.authoring.stylesheets)
 |
| | Thread Tools | Display Modes |
#1
 
| |||
| |||
|
float a SPAN to the right in a LI -
10-13-2008
, 02:10 PM
#2
| |||
| |||
|
|
I have <ul> <li> item text <span> count </span> </li><li> item text span> count </span> </li> </ul I want the span to right in the LI, but when I use float:right on the SPAN it winds-up appearing in the next LI in the list, and the last SPAN appears outside the list. The SPANs appear in the correct place in the horizontal, *but down "one" in the vertical. How to do it correctly? |
BEFORE the element they are floating against. So in your case, you
want the floated SPAN to go to the right of the base text within the
LI. So:
<ul>
<li><span>count</span> item text</li>
<li><span>count</span> item text</li>
<li><span>count</span> item text</li>
</ul>
If you want to maintain the "item text - count" ordering in the event
that the user doesn't have style sheets, you could set the text-
alignment of the LI to "right", then span the item text and float it
"left", thusly:
<ul>
<li><span>item text</span> count</li>
<li><span>item text</span> count</li>
<li><span>item text</span> count</li>
</ul>
#3
| |||
| |||
|
|
On Oct 13, 2:10*pm, asc4john <j... (AT) kinnear (DOT) ca> wrote: I have <ul> <li> item text <span> count </span> </li><li> item text span> count </span> </li> </ul I want the span to right in the LI, but when I use float:right on the SPAN it winds-up appearing in the next LI in the list, and the last SPAN appears outside the list. The SPANs appear in the correct place in the horizontal, *but down "one" in the vertical. How to do it correctly? Generally speaking, floats have to ... hmmm, how to say this ... come BEFORE the element they are floating against. So in your case, you want the floated SPAN to go to the right of the base text within the LI. So: ul * <li><span>count</span> item text</li * <li><span>count</span> item text</li * <li><span>count</span> item text</li /ul If you want to maintain the "item text - count" ordering in the event that the user doesn't have style sheets, you could set the text- alignment of the LI to "right", then span the item text and float it "left", thusly: ul * <li><span>item text</span> count</li * <li><span>item text</span> count</li * <li><span>item text</span> count</li /ul |
#4
| |||
| |||
|
|
On Oct 13, 12:50*pm, Kevin Scholl <ksch... (AT) comcast (DOT) net> wrote: On Oct 13, 2:10*pm, asc4john <j... (AT) kinnear (DOT) ca> wrote: I have <ul> <li> item text <span> count </span> </li><li> item text span> count </span> </li> </ul I want the span to right in the LI, but when I use float:right on the SPAN it winds-up appearing in the next LI in the list, and the last SPAN appears outside the list. The SPANs appear in the correct place in the horizontal, *but down "one" in the vertical. How to do it correctly? Generally speaking, floats have to ... hmmm, how to say this ... come BEFORE the element they are floating against. So in your case, you want the floated SPAN to go to the right of the base text within the LI. So: ul * <li><span>count</span> item text</li * <li><span>count</span> item text</li * <li><span>count</span> item text</li /ul If you want to maintain the "item text - count" ordering in the event that the user doesn't have style sheets, you could set the text- alignment of the LI to "right", then span the item text and float it "left", thusly: ul * <li><span>item text</span> count</li * <li><span>item text</span> count</li * <li><span>item text</span> count</li /ul aah, never thought of that, thanks you |
#5
| |||
| |||
|
|
On Oct 13, 2:10*pm, asc4john <j... (AT) kinnear (DOT) ca> wrote: I have <ul> <li> item text <span> count </span> </li><li> item text span> count </span> </li> </ul I want the span to right in the LI, but when I use float:right on the SPAN it winds-up appearing in the next LI in the list, and the last SPAN appears outside the list. The SPANs appear in the correct place in the horizontal, *but down "one" in the vertical. How to do it correctly? Generally speaking, floats have to ... hmmm, how to say this ... come BEFORE the element they are floating against. So in your case, you want the floated SPAN to go to the right of the base text within the LI. So: ul li><span>count</span> item text</li li><span>count</span> item text</li li><span>count</span> item text</li /ul If you want to maintain the "item text - count" ordering in the event that the user doesn't have style sheets, you could set the text- alignment of the LI to "right", then span the item text and float it "left", thusly: ul li><span>item text</span> count</li li><span>item text</span> count</li li><span>item text</span> count</li /ul |
this last! Perhaps best turn bullets off so the problem does not appear.
--
dorayme
#6
| |||
| |||
|
|
Generally speaking, floats have to ... hmmm, how to say this ... come BEFORE the element they are floating against. So in your case, you want the floated SPAN to go to the right of the base text within the |
|
« Previous Thread
|
Next Thread »
| Thread Tools | |
| Display Modes | |
Linear Mode
| |
Powered by vBulletin Version 3.5.4
Copyright ©2000 - 2009, Jelsoft Enterprises Ltd.
Copyright ©2000 - 2009, Jelsoft Enterprises Ltd.