用divreplaceHTML表格

好吧，我正试图购买html表格不应该被使用的想法，而divs应该是。 但是，我经常有类似于以下的代码

<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> 

我想要标签alignment，我想控制alignment。 我怎样才能做到这一点，而不使用表？

Answer 1

这应该是诀窍。

 <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> 

我希望你明白这个概念。

Answer 2

请注意，虽然表格不鼓励作为页面布局的主要手段， 但他们仍然有自己的位置 。 表格可以并且应该在适当的时候使用，直到一些更stream行的浏览器（ahem，IE，ahem）变得更符合标准，表格有时是解决scheme的最佳途径。

Answer 3

我查找了一个简单的解决scheme，发现这个代码对我有用。 为了可读性， right div是我留下的第三列。

这里是HTML：

 <div class="container"> <div class="row"> <div class="left"> <p>PHONE & FAX:</p> </div> <div class="middle"> <p>[phone]</p> </div> <div class="right"> </div> </div> <div class="row"> <div class="left"> <p>Cellphone Gert:</p> </div> <div class="middle"> <p>[phone]</p> </div> <div class="right"> </div> </div> <div class="row"> <div class="left"> <p>Cellphone Petra:</p> </div> <div class="middle"> <p>[phone]</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; } 

Answer 4

您可以创build简单的基于浮动的表单而不必丢失液体布局。 例如：

 <style type="text/css"> .row { clear: left; padding: 6px; } .row label { float: left; width: 10em; } .row .field { display: block; margin-left: 10em; } .row .field input, .row .field select { width: 100%; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -khtml-box-sizing: border-box; } </style> <div class="row"> <label for="f-firstname">First name</label> <span class="field"><input name="firstname" id="f-firstname" value="Bob" /></span> </div> <div class="row"> <label for="f-state">State</label> <span class="field"><select name="state" id="f-state"> <option value="NY">NY</option> </select></span> </div> 

但是，如果您有复杂的表单布局，并且有多个固定且灵活的宽度列的网格，则这样做往往会失败。 在这一点上，你必须决定是否坚持使用div，并放弃液体布局，而只是将所有东西放到固定的像素位置，或让表格做。

就我个人而言，液体布局比用于布局表单的确切元素更重要的可用性特征，所以我通常会select表格。

Answer 5

基本上归结为使用固定宽度的页面，并设置这些标签和控件的宽度。 这是实现无表格布局的最常见的方式。

有很多方法可以设置宽度。 Blueprint.css是一个非常stream行的CSS框架，可以帮助您设置列/宽度。

Answer 6

有一个非常有用的在线工具，只需自动将表格转换为div：

http://www.html-cleaner.com/features/replace-html-table-tags-with-divs/

并解释它的video： https ： //www.youtube.com/watch？v = R1ArAee6wEQ

我每天使用这个。 我希望它有帮助;）