另一个 Divs vs Tables 问题:表单 [英] Yet Another Divs vs Tables issue: Forms

问题描述

[Meta-note:] 我正在浏览问题页面，对DIVS 与表格"何时使用表格与 DIVS"Div 是否比表格更好"表格与 CSS"以及所有问题感到厌烦问同样的事情 OMG 人 但我想看看人们解决为什么你应该放弃并使用表格"的规范示例的翻译的所有方式:

[Meta-note:] I was browsing the question page, getting really tired of "DIVS vs Tables" "When to use tables vs DIVS" "Are Divs better than Tables" "Tables versus CSS" and all the questions that ask THE SAME THING OMG PEOPLE but I would like to see all the ways people tackle the translation of the canonical example of "why you should give up and use tables":

<table>
  <tr>
    <td> Name </td>
    <td> <input> </td>
  </tr>
  <tr>
    <td> Social Security Number </td>
    <td> <input> </td>
  </tr>
</table>

问题: 如何最好地(语义上、简单地、稳健地、流畅地、可移植地)在没有表格的情况下实现上述内容.对于初学者，我猜想一个天真的实现为第一列使用固定的列宽，但是对于动态生成的内容可能会产生不确定的结果.在答案中包含您的方法的优点/缺点会很好.

Question: How to best (semantically, simply, robustly, fluidly, portably) implement the above without tables. For starters, I guess a naive implementation uses a fixed column width for the first column, but that can have iffy results for dynamically generated content. Including strengths/weaknesses of your approach in the answer would be nice.

附言我很想知道的另一个问题是垂直居中，但是 jakpsatweb.cz

P.S. Another one I wonder about a lot is vertical centering but the hack for that is covered pretty well at jakpsatweb.cz

scunlife 举了一个很好的例子来说明为什么我没有仔细考虑这个问题.表格可以同时对齐多列.问题仍然存在(我希望看到用于对齐/布局的不同 CSS 技术)-尽管可以处理他的解决方案?更复杂的例子肯定是首选.

scunlife brings up a good example of why I didn't think out the problem that carefully. Tables can align multiple columns simultaneously. The Question still stands (I'd like to see different CSS techniques used for alignment/layout) - although solutions that can handle his? more involved example definitely are preferred.

推荐答案

我通常做的是:

<form>
 <label for="param_1">Param 1</label>
 <input id="param_1" name="param_1"><br />
 <label for="param_2">Param 2</label>
 <input id="param_2" name="param_2"><br />
</form>

并在 CSS 中:

label,input { display: block; float: left; margin-bottom: 1ex; }
input { width: 20em; }
label { text-align: right; width: 15em; padding-right: 2em; }
br { clear: left; }

当然，您必须根据实际数据定义宽度:-)

Of course, you'll have to define the width according to your actual data :-)

• 首先给label，输入display:block，这样就可以给它赋值一个大小，并排成一行.
• 他们都得到 float: left 因为 Explorer 做事有点不同
• 很好地格式化标签
• 破解 br 以便在某处有一个 clear: left，我记得把它放在标签上在某些浏览器上不起作用.

• First, give label and input display: block, so that it can be assigned a size and be lined up.
• They both get float: left because Explorer does things a bit differently
• Format the label nicely
• hack the br so that there's a clear: left somewhere, and I remember that putting it on the label didn't work on some browser.

另外，使用 br 即使浏览器不支持 CSS，您也可以获得不错的格式 :-)

Plus, with the br you get a nice formatting even if the browser does not support CSS :-)

这篇关于另一个 Divs vs Tables 问题:表单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！