开发者

Styling multiple s:select dropdowns to display inline

开发者 https://www.devze.com 2023-03-24 12:36 出处:网络
I have a form with threestruts2 tags after each other. When the page is rendered, the s:select tag is automaticly transformed to the html shown at the bottom.

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*/
}
0

精彩评论

暂无评论...
验证码 换一张
取 消