如何在没有表格的情况下设置样式并对齐

Question

我已经习惯了用来<table>s完美地对齐我的表单字段.这就是我通常写我的表格的方式:

<table border="0">
   <tr>
     <td><label for="f_name">First name:</label></td>
     <td><input type='text' id='f_name' name='f_name' /></td>
     <td class='error'><?=form_error('f_name');?></td>
   </tr>
</table>

我知道这是不好的做法,我想使用CSS, ,<label>s,<div>s或清洁方法.然而,事实是,<table>s表格的工作非常好.一切都完全正确,间距是完美的,所有错误都完全在彼此之下,等等.

我最近尝试使用<dt>和<dd>标记表单,但我最终还是回到表格只是因为它们看起来好多了.

如何在不使用<table>s的情况下获得这种对齐的表格布局？

Answer 1

这可能得不到很多支持,但这是我的两分钱:

在某些情况下,表格更容易布局; 比如三列或表格(尽管这里有一些很好的建议,可以做一个纯粹的css表单布局,所以不要忽略它们.)

Processes and methodologies can make good servants but are poor masters.
   - Mark Dowd, John McDonald & Justin Schuh 
     in "The Art of Software Security Assessment"

我相信这句话非常强烈地适用于这种情况.如果您的表格布局适合您,不会导致可访问性问题而且没有损坏 - 那么就不要修复它.

像"你应该","必须","永远"这样的短语 - 让我害怕,因为一个尺寸不适合所有人!带着一粒盐的狂热者.

Answer 2

是的,使用标签和CSS:

<label class='FBLabel' for="FName">First Name</label>
<input value="something" name="FName" type="text" class='FBInput'>
<br>

CSS:

.FBLabel, .FBInput {
    display:block;
    width:150px;
    float:left;
    margin-bottom:10px;
}

请参阅:http://www.alistapart.com/articles/prettyaccessibleforms

Answer 3

如果您不使用表格,则需要预先知道标签的宽度.对于多语言站点(i18n),这通常是一个问题.

使用桌子,它们可以伸展以适合不同尺寸的标签.仅靠CSS无法以良好的支持方式实现这一目标.

Answer 4

你为什么不想用桌子？听起来他们现在正在为你工作.您是否担心可访问性问题？仅仅因为它是一个表并不意味着可访问性会受到影响.

我想提醒你除了纯净之外别无他法地创造一个解决问题的新解决方案.即使您担心语义,究竟什么样的语义描述了一个表单？

Answer 5

我大部分时间都使用以下方法,它允许我完全按照我喜欢的方式设置所有对齐方式.正如您所看到的,它为CSS和JS提供了大量的钩子.

<form id="login-form" action="#" method="post">
	<fieldset>
		<label id="for-email" for="email">
			<span class="label-title">Email Address <em class="required">*</em></span>
			<input id="email" name="email" type="text" class="text-input" />
		</label>
		
		<label id="for-password" for="password">
			<span class="label-title">Password <em class="required">*</em></span>
			<input id="password" name="password" type="password" class="text-input" />
		</label>
	</fieldset>
	
	<ul class="form-buttons">
		<li><input type="submit" value="Log In" /></li>
	</ul>
</form><!-- /#login-form -->

Answer 6

这里大多数非基于表格的答案都依赖于预先确定的固定宽度，这对于国际化或无法确定标签所需宽度的任何其他情况可能是一种痛苦。

但 CSS 正是display: table出于这个原因：

超文本标记语言

<div class="form-fields">
  <div class="form-field">
    <label class="form-field-label" for="firstNameInput">First Name</label>
    <div class="form-field-control"><input type="text" id="firstNameInput"></div>
    <div class="form-field-comment">Required</div>
  </div>
  <div class="form-field">
    <label class="form-field-label" for="lastNameInput">Last Name</label>
    <div class="form-field-control"><input type="text" id="lastNameInput"></div>
    <div class="form-field-comment">Required</div>
  </div>
</div>

CSS

.form-fields {
  display: table;
}

.form-field {
  display: table-row;
}

.form-field-label,
.form-field-control,
.form-field-comment {
  display: table-cell;
  padding: 3px 10px;
}

简单的。