Styling multiple s:select dropdowns to display inline
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 followin开发者_运维技巧g 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>
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*/
}
精彩评论