Problem with option tag alignment

118 100+

Hi,

i am using the select box consits the option items in option tag .I have displayed the two items in option tag.i,e product name is to align left and product price is to align right .How can apply css to this feature.

I used like this

Expand|Select|Wrap|Line Numbers

<option value="">Product name    product price</option>

But in case long length product names,short length product names it will not align properly. If any body please help me.Its very urgent.

Thanks
Swetha

Aug 10 '09 #1

Follow Post Reply

5389

Dormilich

8,658

Expert Mod 8TB

you could try to float (CSS) the price right (<span> should be OK)

Aug 10 '09 #2

swethak

118

100+

Hi,

Thank you for your reply.But span tag is not working inside option tag.Please suggest other ways.

Thanks
Swetha

Aug 10 '09 #3

Dormilich

8,658

Expert Mod 8TB

well, this is working for me…

Expand|Select|Wrap|Line Numbers

 <?xml version="1.0" encoding="utf-8" ?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">

    <head>

        <meta http-equiv="content-type" content="application/xhtml+xml;charset=utf-8" />

        <meta http-equiv="content-style-type" content="text/css" />

        <meta http-equiv="content-script-type" content="text/javascript" />

        <title>test centre</title>

        <style type="text/css">

/* <![CDATA[ */

option span {

    float: right;

}
 
option {

    width: 10em;

}

/* ]]> */

        </style>

    </head>

    <body>

        <form>

            <select size="1">

                <option><span>3,50</span>Muskeln</option>

                <option><span>2,74</span>Sehnen</option>

                <option><span>213,90</span>Knochen</option>

                <option><span>39,62</span>Knorpel</option>

                <option><span>89,12</span>Blut</option>

                <option><span>47,08</span>Zellen</option>

                <option><span>38,91</span>Grips</option>

            </select>

        </form>

    </body>

</html>