用Div替换HTML表格
用Div替换HTML表格
提问于 2009-03-31 17:39:21
好吧，我试着相信html表不应该被使用，而div应该被使用。但是，我的代码通常类似于以下代码
<table>
<tr>
<td>First Name:</td>
<td colspan="2"><input id="txtFirstName"/></td>
</tr>
<tr>
<td>Last Name:</td>
<td colspan="2"><input type="text" id="txtLastName"/></td>
</tr>
<tr>
<td>Address:</td>
<td>
<select type="text" id="ddlState">
<option value="NY">NY</option>
<option value="CA">CA</option>
</select>
</td>
<td>
<select type="text" id="ddlCountry">
<option value="NY">USA</option>
<option value="CA">CAN</option>
</select>
</td>
</tr>
</table>我希望标签对齐，控件对齐。在不使用表的情况下，我如何做到这一点？
回答 4
Stack Overflow用户
回答已采纳
发布于 2009-03-31 18:16:57
这应该能起到作用。
<style>
div.block{
overflow:hidden;
}
div.block label{
width:160px;
display:block;
float:left;
text-align:left;
}
div.block .input{
margin-left:4px;
float:left;
}
</style>
<div class="block">
<label>First field</label>
<input class="input" type="text" id="txtFirstName"/>
</div>
<div class="block">
<label>Second field</label>
<input class="input" type="text" id="txtLastName"/>
</div>我希望你能理解这个概念。
Stack Overflow用户
发布于 2012-09-13 20:40:50
我到处寻找一个简单的解决方案，找到了这个对我有效的code。right div是第三列，出于可读性的考虑，我将其留在了第三列。
下面是HTML：
<div class="container">
<div class="row">
<div class="left">
<p>PHONE & FAX:</p>
</div>
<div class="middle">
<p>+43 99 554 28 53</p>
</div>
<div class="right"> </div>
</div>
<div class="row">
<div class="left">
<p>Cellphone Gert:</p>
</div>
<div class="middle">
<p>+43 99 302 52 32</p>
</div>
<div class="right"> </div>
</div>
<div class="row">
<div class="left">
<p>Cellphone Petra:</p>
</div>
<div class="middle">
<p>+43 99 739 38 84</p>
</div>
<div class="right"> </div>
</div>
</div>和CSS：
.container {
display: table;
}
.row {
display: table-row;
}
.left, .right, .middle {
display: table-cell;
padding-right: 25px;
}
.left p, .right p, .middle p {
margin: 1px 1px;
}Stack Overflow用户
发布于 2009-03-31 17:47:02
基本上，它归结为使用固定宽度的页面并设置这些标签和控件的宽度。这是实现无表布局的最常见方式。
设置宽度有很多方法。Blueprint.css是一个非常流行的css框架，它可以帮助你设置列/宽度。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/702181
复制相关文章
相似问题
腾讯云开发者
