如何對齊兩個文本字段

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