如何將不在div內的元素與div內的其他元素對齊？

Question

我有一個表格內的一個div和一個<select>出這個相同的股利。 以這種方式，我需要將<select>元素與表的第一列對齊。

有可能嗎？我怎麼做？

$(function() { 
 
    $('#seletor').change(function() { 
 
    $('.content').hide(); 
 
    $('#' + $(this).val()).show(); 
 
    }); 
 
});

table td:first-child { 
 
    text-align: right; 
 
} 
 
body { 
 
    font-family: Verdana, Geneva, Tahoma, sans-serif; 
 
    color: #2F5496; 
 
    font-size: 80%; 
 
    font-weight: bold; 
 
} 
 
.ui-datepicker { 
 
    font-size: 100%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select id="seletor"> 
 
    <option value="cheque">Cheque</option> 
 
    <option value="caixa">Caixa</option> 
 
    <option value="banco">Banco</option> 
 
    <option value="bordero">Bordero</option> 
 
</select> 
 
<div style="border:1px fuchsia solid;text-align:center"> 
 
    <div id="cheque" class="content" style=""> 
 
    <table> 
 
     <tr> 
 
     <td>Conta Corrente Reduzida:</td> 
 
     <td> 
 
      <input type="text" style="width:44px;" class="number" valida="fvalnum()" /> 
 
      <a href=""> 
 
      <img src="/sistema/imagens/lupa.gif" border="0"> 
 
      </a> 
 

 
      <input type="text" style="width:439px;" readonly/> 
 
     </td> 
 
     </tr> 
 
     <tr> 
 
     <td>Agência:</td> 
 
     <td> 
 
      <input type="text" style="width:224px;" readonly/> \t <span style="margin-left:37px;">Conta Corrente:</span> 
 
      <input type="text" style="width:124px;" readonly/> 
 
     </td> 
 
     </tr> 
 
     <tr> 
 
     <td>Nr. Cheque:</td> 
 
     <td> 
 
      <input type="text" style="width:124px;" class="number" valida="fvalnum()" /> \t <span style="margin-left:20px;">Série:</span> 
 
      <input type="text" style="width:79px;" /> \t <span style="margin-left:20px;">Vl. Cheque:</span> 
 
      <input type="text" style="width:124px;" class="number" valida="fvalnum()" /> 
 
     </td> 
 
     </tr> 
 
     <tr> 
 
     <td>Nominal a:</td> 
 
     <td> 
 
      <input type="text" style="width:424px;" /> 
 
     </td> 
 
     </tr> 
 
     <tr> 
 
     <td>Data Pagamento:</td> 
 
     <td> 
 
      <input type="text" style="width:74px;" class="data_browser" onKeyPress="formato(this,'DAT')" onBlur="formato(this,'DAT_LEAVE')" maxlength="10" class="number" valida="fvalnum()" /> 
 
     </td> 
 
     </tr> 
 
     <tr> 
 
     <td>Obs.:</td> 
 
     <td> 
 
      <input type="text" style="width:424px;" /> 
 
     </td> 
 
     </tr> 
 
    </table> 
 
    </div> 
 
    <div id="caixa" class="content" style="display:none;"> 
 
    <table> 
 
     <tr> 
 
     <td>Data Pagamento:</td> 
 
     <td> 
 
      <input type="text" style="width:74px;" class="data_browser" onKeyPress="formato(this,'DAT')" onBlur="formato(this,'DAT_LEAVE')" maxlength="10" class="number" valida="fvalnum()" /> \t <span>Dt. Caixa:</span> 
 
      <input type="text" style="width:74px;" class="data_browser" onKeyPress="formato(this,'DAT')" onBlur="formato(this,'DAT_LEAVE')" maxlength="10" readonly class="number" valida="fvalnum()" /> 
 
     </td> 
 
     </tr> 
 
     <tr> 
 
     <td>Obs.:</td> 
 
     <td> 
 
      <input type="text" style="width:424px;" /> 
 
     </td> 
 
     </tr> 
 
    </table> 
 
    </div> 
 
    <div id="banco" class="content" style="display:none;"> 
 
    <table> 
 
     <tr> 
 
     <td>Conta Corrente Reduzida:</td> 
 
     <td> 
 
      <input type="text" style="width:44px;" class="number" valida="fvalnum()" /> 
 
      <a href=""> 
 
      <img src="/sistema/imagens/lupa.gif" border="0"> 
 
      </a> 
 

 
      <input type="text" style="width:436px;" readonly/> 
 
     </td> 
 
     </tr> 
 
     <tr> 
 
     <td>Agência:</td> 
 
     <td> 
 
      <input type="text" style="width:223px;" readonly/> \t <span style="margin-left:35px;">Conta Corrente:</span> 
 
      <input type="text" style="width:124px;" readonly/> 
 
     </td> 
 
     </tr> 
 
     <tr> 
 
     <td>Data Pagamento:</td> 
 
     <td> 
 
      <input type="text" style="width:74px" class="data_browser" onKeyPress="formato(this,'DAT')" onBlur="formato(this,'DAT_LEAVE')" maxlength="10" class="number" valida="fvalnum()" /> 
 
     </td> 
 
     </tr> 
 
     <tr> 
 
     <td>Obs.:</td> 
 
     <td> 
 
      <input type="text" style="width:424px;" /> 
 
     </td> 
 
     </tr> 
 
    </table> 
 
    </div> 
 
    <div id="bordero" class="content" style="display:none;"> 
 
    <table> 
 
     <tr> 
 
     <td>Conta Corrente Reduzida:</td> 
 
     <td> 
 
      <input type="text" style="width:44px;" class="number" valida="fvalnum()" /> 
 
      <a href=""> 
 
      <img src="/sistema/imagens/lupa.gif" border="0"> 
 
      </a> 
 

 
      <input type="text" style="width:436px;" readonly/> 
 
     </td> 
 
     </tr> 
 
     <tr> 
 
     <td>Agência:</td> 
 
     <td> 
 
      <input type="text" style="width:223px;" readonly/> \t <span style="margin-left:35px;">Conta Corrente:</span> 
 
      <input type="text" style="width:124px;" readonly/> 
 
     </td> 
 
     </tr> 
 
     <tr> 
 
     <td>Data Pagamento:</td> 
 
     <td> 
 
      <input type="text" style="width:74px" class="data_browser" onKeyPress="formato(this,'DAT')" onBlur="formato(this,'DAT_LEAVE')" maxlength="10" class="number" valida="fvalnum()" /> 
 
     </td> 
 
     </tr> 
 
     <tr> 
 
     <td>Obs.:</td> 
 
     <td> 
 
      <input type="text" style="width:424px;" /> 
 
     </td> 
 
     </tr> 
 
    </table> 
 
    </div> 
 
</div>

Answer 1

下面的代碼只需添加到你的CSS

fiddle

table td:first-child {text-align:right; width:150px;min-width:150px;} 
#seletor{ 
    width:150px; 
    margin-bottom:10px; 
    text-align:right; 
}