本文介绍了使用Div替换HTML表格的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
好吧,我想买进的想法,html表不应该使用,divs应该。但是,我通常有类似于以下代码
Alright, I'm trying to buy into the idea that html tables should not be used, and that divs should be. However, I often have code that resembles the following
<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>
我想要的标签对齐,我想要的控件对齐。
I want the labels to be aligned and I want the controls to be aligned. How would I do this without using tables?
推荐答案
这应该可以做到。
<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>
我希望你能得到这个概念。
I hope you get the concept.
这篇关于使用Div替换HTML表格的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!