我怎樣才能水平放置struts 2元素？

Question

我正在使用Struts 2 + JqueryUI Struts2插件，我想水平放置一些項目。

在struts2表單項中，所有元素都是垂直...

這是我的代碼：

<s:form action="test" theme="simple">
<sj:a id="ajaxlink" onclick="disminuyeBloque()" button="true" buttonIcon="ui-icon-minus" cssStyle="height:20px"/>
<sj:textfield id="tamannobloque"  name="tamannobloque" readonly="true" size="2" />
<sj:a id="ajaxlinkminus" onclick="aumentaBloque()" button="true" buttonIcon="ui-icon-plus" cssStyle="height:20px"/>
<sj:slider id="echo4" name="slider" label="Echo" value="{3, 7}" min="1" max="10" onCompleteTopics="sliderRangeStop" cssStyle="margin: 10px; width:20%"/>
</s:form>

我希望滑塊出現在最后一個按鈕（加號按鈕）的旁邊

Answer 1

如果要內聯打印滑塊，則需要使用display:inline-block屬性，並給滑塊指定一定的寬度。

在您的CSS中：

#echo4 {
    display: inline-block;
    width: 100px;
}

您可以在此處查看演示。

Answer 2

您可以嘗試將表單元素的parentTheme為css_xhtml並使用div將元素包裝在同一行上，然后再應用樣式。

就像是

<s:form action="test" theme="simple">
<div>
<sj:a id="ajaxlink" onclick="disminuyeBloque()" button="true" buttonIcon="ui-icon-minus" cssStyle="height:20px"/>
<sj:textfield id="tamannobloque"  name="tamannobloque" readonly="true" size="2" parentTheme="css_xhtml"/>
</div>
<div>
<sj:a id="ajaxlinkminus" onclick="aumentaBloque()" button="true" buttonIcon="ui-icon-plus" cssStyle="height:20px"/>
<sj:slider id="echo4" name="slider" label="Echo" value="{3, 7}" min="1" max="10" onCompleteTopics="sliderRangeStop" cssStyle="margin: 10px; width:20%" parentTheme="css_xhtml"/>
</div>
</s:form>

Answer 3

您可以將滑塊的顯示屬性設置為inline，

<style>
#echo4    
{
display:inline;
}
</style>