32

我已经习惯于<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 的情况下获得这种对齐的表格布局？

4

11 回答 11

27

这可能不会得到很多支持，但这是我的两分钱：

在某些情况下，表格更易于布局；例如三列或表单（尽管这里有一些很好的建议来做一个纯 css 表单布局，所以也不要忽略这些。）

流程和方法可以成为好仆人，但却是糟糕的主人。
   - 马克·多德、约翰·麦克唐纳和贾斯汀·舒
     在“软件安全评估的艺术”中

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

像这样的短语：“你应该”、“必须”、“总是”——让我害怕，因为一刀切不适合所有人！以一粒盐为狂热者。

于 2009-02-26T18:13:38.957 回答
15

是的，使用标签和 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

于 2009-02-26T17:30:56.440 回答
11

如果您不使用表格，则需要预先知道标签的宽度。这通常是多语言网站 (i18n) 的问题。

对于表格，它们可以拉伸以适应不同尺寸的标签。单靠 CSS 还不能以得到良好支持的方式做到这一点。

于 2009-09-08T19:01:47.330 回答
5

为什么不想使用表格？听起来他们现在很适合你。您是否担心可访问性问题？仅仅因为它是一张桌子并不意味着可访问性会受到影响。

我想提醒您不要为了纯洁而为已解决的问题创建新的解决方案。即使你担心语义，到底什么样的语义描述了一种形式？

于 2009-02-26T17:30:41.527 回答
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 -->

于 2009-02-26T17:37:27.283 回答
4

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

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

HTML

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

简单的。

于 2017-05-18T14:36:13.363 回答
3

没有桌子有很多方法可以做到这一点。一旦你掌握了基本格式，它就像桌子一样容易使用，只是最初的游戏可能会很痛苦。因此，只需看看其他已经为您解决所有问题的人：

我还记录了我上周确定的方法（片段）：

<form action="/signup" method="post">
<fieldset>
<legend>Basic Information</legend>
<ol>
<li><label for="name">Name <span class="error">*</span>
    </label><input type="text" id="name" name="name" size="30" /></li>
<li><label for="dob">Date of Birth <span class="error">*</span></label>
    <div class="inputWrapper">
    <input type="text" id="dob" name="dob" size="10" />
    <span class="note">YYYY-MM-DD</span></div></li>
<li><label for="gender">Gender <span class="error">*</span></label>
    <select id="gender" name="gender">
    <option value=""></option>
    <option value="female">Female</option>
    <option value="male">Male</option>
    </select></li>
</ol>
</fieldset>
</form>

和CSS：

fieldset { 
    margin: 0 0 20px 0; } 

fieldset legend { 
    font-weight: bold; 
    font-size: 16px; 
    padding: 0 0 10px 0; 
    color: #214062; } 

fieldset label { 
    width: 170px; 
    float: left; 
    margin-right:10px; 
    vertical-align: top; } 

fieldset ol { 
    list-style:none; 
    margin: 0;
    padding: 0;} 

fieldset ol li { 
    float:left; 
    width:100%; 
    padding-bottom:7px; 
    padding-left: 0; 
    margin-left: 0; } 

fieldset ol li input, 
fieldset ol li select, 
fieldset ol li textarea { 
    margin-bottom: 5px; } 

form fieldset div.inputWrapper { 
    margin-left: 180px; } 

.note { 
    font-size: 0.9em; color: #666; }

.error{ 
    color: #d00; }

jsFiddle

于 2009-02-26T17:46:31.300 回答
2

真的取决于你和谁说话。纯粹主义者说使用 CSS 是因为 table 元素不适合布局。但对我来说，如果它有效，为什么要改变它？我现在确实使用 CSS 进行布局，但我仍然有很多遗留代码我没有也不会改变。

于 2009-02-26T17:31:12.447 回答
0

我过去相当有效地使用过它：

HTML：

<fieldset>
  <p>
    <label for="myTextBox">Name</label>
    <span class="field"><input type="text" name="myTextBox" id="myTextBox" /></span>
    <span class="error">This a message place</span>
  </p>
</fieldset>

CSS：

<style type="text/css">
fieldset label, fieldset .field, fieldset .error { display: -moz-inline-box; display: inline-block; zoom: 1; vertical-align: top; }
fieldset p { margin: .5em 0; }
fieldset label { width: 10em;  text-align: right; line-height: 1.1; }
fieldset .field { width: 20em; }
</style>

唯一真正的问题是 Firefox 2，它可以优雅地降级。（请参阅 -moz-inline-box 这有点 hack，但还不错）

于 2009-02-26T17:45:50.117 回答
0

没有一刀切的方法。但是，您使用的表格示例可以改进：

<table>
  <tbody>
    <tr>
      <th scope="row"><label for="f_name">First name:</label></th>
      <td>
        <input type='text' id='f_name' name='f_name' />
        <?php form_error('f_name'); ?>
      </td>
    </tr>
    <!-- ... -->
  </tbody>
</table>

对错误部分不太确定；我认为将它放在输入旁边比为其设置单独的列更有意义。

于 2009-02-26T17:51:01.120 回答
0

我也遇到了这个问题，但是左边有一个菜单（也有浮动：左边）。

所以。我的解决方案是：html

<div class="new">
   <form>
     <label class="newlabel">Name</label>
     <input type="text" name="myTextBox" id="myTextBox" />
   </form>
</div>

css

.new {
    display:block;
}
.newlabel {
    min-width: 200px;
    float: left;
}

我认为，它也可以在表单类中使用，但实际上我在“新”类中有更多表单。

于 2013-11-14T17:29:07.793 回答