Question

I have a form with three struts2 tags after each other. When the page is rendered, the s:select tag is automaticly transformed to the html shown at the bottom.

Now the problem is that i’m trying to style the form to display these dropdowns in a horisontal line. But with this code i can not set id’s or classes of any of the elements. They all get autogenerated ids and i can only set cssClass on the select itself, not on the ul or li’s

I can however set an id on the form element itself. But i am a newbie at css so i couldnt get it to work. So the question is: How can i style the following html to display the li elements inline when i only have access to set the form id and class? Preferably the labels should be above the select box.

Oh. And I forgot to mention that there is already a css that is styling all these elements in a different matter. The divs have display attributes set, that will break the displays in the li’s. So how can I tell the browser to “nevermind all that styling you normally do on the form, on this occasion just plain simply display these elements inline”

Or another solution, can i switch to just use a plain old tag? And if so how to populate it with items and setting displayvalue and id value?

        <ul>
        <li>
            <div id="xxxx">
                <label>Somelabel</label>
            </div>
            <div id="ssdf">
                <select id="sfsd" name="xx" class="this i can control">
                    <option>1</option>
                    <option>2</option>
                </select>
            </div>
        </li>
        <li>Second dropdown etc</li>
    </ul>

Answer 1

You can use the descendant selector ^{W3C docs}

#formid ul{
   overflow:hidden; /* to autosize height based on contents*/
}

#formid li{
   float: left; /* but you need to make sure that all li elements to not have a combined width larger than the ul containing them*/
}