Problem with option tag alignment

swethak

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

Dormilich

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

swethak

Hi,

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

Thanks
Swetha

Dormilich

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>