如何对齐两个文本字段

Question

我需要在同一行中对齐两个文本字段，但在页面中心的左侧和另一侧对齐。我试试这个：

<div class="pure-g margin-1-0"> 
      <div class="pure-u-1-4"> 
       <label for="tipologia"> 
        <fmt:message key="label.table.lavorazioni.spese.tipologia"/> 

       </label> 

       <s:textfield cssClass="pure-u-23-24 required" size="35" name="" id="tipologia" /> 
      </div> 
      <div class="pure-u-1-4" style="align:center"> 
       <label for="valore"> 
        <fmt:message key="label.table.lavorazioni.spese.valore"/> 

       </label> 

       <s:textfield cssClass="pure-u-23-24 required" size="35" name="" id="valore" /> 
      </div> 
     </div> 

但我看到左边的一个正确，但其他仍然是第一个旁边，而不是在中心。

有什么建议吗？

Answer 1

要对齐容器内的元素，请使用text-align css规则。 Struts2标签使用主题在表单中生成额外的内容。所以它可能会破坏最初的设计。

<div class="pure-g margin-1-0"> 
 
      <div class="pure-u-1-4" style="text-align:center"> 
 
       <label for="tipologia"> 
 
        <fmt:message key="label.table.lavorazioni.spese.tipologia"/> 
 

 
       </label> 
 

 
       <input type="text" class="pure-u-23-24 required" size="35" name="" id="tipologia" /> 
 
      </div> 
 
      <div class="pure-u-1-4" style="text-align:center"> 
 
       <label for="valore"> 
 
        <fmt:message key="label.table.lavorazioni.spese.valore"/> 
 

 
       </label> 
 

 
       <input type="text" class="pure-u-23-24 required" size="35" name="" id="valore" /> 
 
      </div> 
 
     </div>

JSFiddle