0
我有一个表格内的一个div和一个<select>
出这个相同的股利。 以这种方式,我需要将<select>
元素与表的第一列对齐。如何将不在div内的元素与div内的其他元素对齐?
有可能吗?我怎么做?
$(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>
提供一些代码。可能是小提琴(现场演示) –
小提琴在这里:http://jsfiddle.net/skkhgzx4/ –
你可以使用保证金或位置 – Pete