gar*_*ryv 9 javascript css layout width
在一个表单中,我想输入:文本填充剩余空格后,表格的标签左右对齐.
标签有字符数,因此我无法在标签上设置固定宽度.
代码示例:
<fieldset>
<legend>User Info</legend>
<p><label>First Name :</label><input type="text"...></p>
<p><label>Last Name : </label><input type="text"...></p>
<p><label>Completed Email Address :</label><input type="text"...></p>
</fieldset>
如何设置输入样式以填充文本后的剩余空间.
谢谢.
<!doctype html>
<html>
<head>
<style>
.grid { width: 100%; display: table; table-layout: auto; }
.row { display: table-row; }
label.cell { white-space: nowrap; display: table-cell; }
span.cell { width: 100%; display: table-cell; }
span.cell input { width: 100%; display: block; }
</style>
</head>
<body>
<fieldset>
<legend>User Info</legend>
<div class="grid">
<div class="row"><label class="cell">First Name:</label> <span class="cell"><input type="text" /></span></div>
</div>
<div class="grid">
<div class="row"><label class="cell">Last Name:</label> <span class="cell"><input type="text" /></span></div>
</div>
<div class="grid">
<div class="row"><label class="cell">Completed Email Address:</label> <span class="cell"><input type="text" /></span></div>
</div>
</fieldset>
</body>
</html>
在旧版浏览器中不起作用.
LE:如果您不需要/不希望/必须支持IE 6和7等旧浏览器,请使用此代码.否则,请使用JavaScript.Ooor使用这个代码在IE 6和7中使用了一些JavaScript.是的,我认为这是最好的方法:D
我首先在评论中发布了这个,但建议作为答案发布.这不是CSS解决方案,而是基于表的解决方案.但是,它应该适用于所有浏览器(虽然我没有测试这个). 需要span内部标签td来解决IE不应用于white-space: nowrap表格单元格的错误.
<table width="100%">
<tr>
<td width="1"><span style="white-space: nowrap;">First name:</span></td>
<td><input style="width:100%"/></td>
</tr>
</table>
<table width="100%">
<tr>
<td width="1"><span style="white-space: nowrap;">Last name:</span></td>
<td><input style="width:100%"/></td>
</tr>
</table>
<table width="100%">
<tr>
<td width="1"><span style="white-space: nowrap;">Completed Email Address:</span></td>
<td><input style="width:100%"/></td>
</tr>
</table>
| 归档时间： |
|
| 查看次数： |
5136 次 |
| 最近记录： |