如何将div中的元素与div中的其他元素对齐？

Question

我在div中有一个表，并且在同一个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/>	<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()" />	<span style="margin-left:20px;">Série:</span>
          <input type="text" style="width:79px;" />	<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()" />	<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/>	<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/>	<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;
}