I have a form with three consecutive struts2 tags. Upon rendering the page, the s:select tag is automatically converted to the HTML code at the bottom.
The issue arises when I attempt to style the form in order to display these dropdowns horizontally. Unfortunately, as the code stands, I am unable to set ids or classes for any of the elements. They are all assigned auto-generated ids, and I can only apply a cssClass to the select tag itself, not to the ul or li elements.
Although I have the option to assign an id to the form element, my limited experience with CSS has prevented me from achieving the desired outcome. Therefore, my question is: How can I style the following HTML to present the li elements in a horizontal line while only having access to set the form id and class? Additionally, it would be preferable if the labels were situated above the select box.
It's worth noting that there is an existing CSS stylesheet that styles these elements differently. The divs have specific display attributes that could disrupt the layout of the li elements. Is there a way to instruct the browser to ignore its default styling and simply display these elements inline?
Alternatively, is it possible to switch to using a plain old "ul" tag instead? If so, how can I populate it with items while setting display value and id values?
<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>