473,386 Members | 1,679 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,386 software developers and data experts.

float a SPAN to the right in a LI

I have <ul<liitem text <spancount </span</li><liitem text
<spancount </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?
Oct 13 '08 #1
5 3696
On Oct 13, 2:10*pm, asc4john <j...@kinnear.cawrote:
I have <ul<liitem text <spancount </span</li><liitem text
<spancount </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</spanitem text</li>
<li><span>count</spanitem text</li>
<li><span>count</spanitem 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</spancount</li>
<li><span>item text</spancount</li>
<li><span>item text</spancount</li>
</ul>
Oct 13 '08 #2
On Oct 13, 12:50*pm, Kevin Scholl <ksch...@comcast.netwrote:
On Oct 13, 2:10*pm, asc4john <j...@kinnear.cawrote:
I have <ul<liitem text <spancount </span</li><liitem text
<spancount </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</spanitem text</li>
* <li><span>count</spanitem text</li>
* <li><span>count</spanitem 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</spancount</li>
* <li><span>item text</spancount</li>
* <li><span>item text</spancount</li>
</ul>
aah, never thought of that, thanks you
Oct 13 '08 #3
On Oct 13, 2:58*pm, asc4john <j...@kinnear.cawrote:
On Oct 13, 12:50*pm, Kevin Scholl <ksch...@comcast.netwrote:
On Oct 13, 2:10*pm, asc4john <j...@kinnear.cawrote:
I have <ul<liitem text <spancount </span</li><liitem text
<spancount </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</spanitem text</li>
* <li><span>count</spanitem text</li>
* <li><span>count</spanitem 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</spancount</li>
* <li><span>item text</spancount</li>
* <li><span>item text</spancount</li>
</ul>

aah, never thought of that, thanks you
Welcome. :-)
Oct 13 '08 #4
In article
<5a**********************************@1g2000prd.go oglegroups.com>,
Kevin Scholl <ks*****@comcast.netwrote:
On Oct 13, 2:10*pm, asc4john <j...@kinnear.cawrote:
I have <ul<liitem text <spancount </span</li><liitem text
<spancount </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</spanitem text</li>
<li><span>count</spanitem text</li>
<li><span>count</spanitem 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</spancount</li>
<li><span>item text</spancount</li>
<li><span>item text</spancount</li>
</ul>
But watch for fun and games with bullets in different browsers if you do
this last! Perhaps best turn bullets off so the problem does not appear.

--
dorayme
Oct 13 '08 #5
On 13 loka, 20:50, Kevin Scholl <ksch...@comcast.netwrote:
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
Great, thanks!
Oct 14 '08 #6

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

4
by: Jason Allen | last post by:
I have a header which contains a subject and a date, and I would like it to look something like this: Some text that is the subject October 28, 2003 Where the subject...
6
by: TJ | last post by:
I've got a calendar that is based on the concept of lots of blocks that are spans with float:left. I would like to be able to have a detail section on the right side of the screen, so that when...
3
by: Michael Shell | last post by:
Greetings, I've been playing with CSS inline floats of <span> elements and the results are not quite what I would expect. In the example attached at the end of this post, I would expect the...
5
by: Oliver Block | last post by:
Hello everybody, I wonder why a <span style="float:right">some text</span> might be displayed out of a surrounding div element. It is shifted to the next line. I thougt it is supposed to...
22
by: ashkaan57 | last post by:
Hi, I am trying to put text on left and right side of the page and used: <div> <span>blah blah</span> <span style="float:right">blah blah</span> </div> The 2nd text does go to the right but the...
27
by: GloStix | last post by:
WARNING VIDEO TAKES A WHILE TO LOAD http://screencast.com/t/BWQ6DNtsM I really don't know how to fix this other than putting another div. But I dont' exactly want to do that for every page....
4
by: smartic | last post by:
hi i'm having problem with designing css layout i'm not expert so i need any one good in css help me in this page, my problem in this page i need to make menus to be displayed in one line beside each...
7
by: JackRbt | last post by:
I have a navbar in a div, with several links. The last one is in a <span> because I want it to float to the right by itself. The span does float right, but it shows up below the navbar div. I want it...
2
by: paragpdoke | last post by:
Hello All. I have a weird observation regarding the CSS float style for span. Allow me to share details before asking my question: Screen resolution: 1024x768 (I know my monitor is outdated; it...
0
by: Charles Arthur | last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
0
by: ryjfgjl | last post by:
If we have dozens or hundreds of excel to import into the database, if we use the excel import function provided by database editors such as navicat, it will be extremely tedious and time-consuming...
0
by: ryjfgjl | last post by:
In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...
0
by: emmanuelkatto | last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel
1
by: nemocccc | last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
0
by: Hystou | last post by:
There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
0
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...
0
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...
0
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.