无表格的布局表格字段 [英] Layout form fields without tables

问题描述

我正在尝试实现一个非常简单的HTML布局。它是这样的：

 一个标签：[Input] 
另一个标签：[Input] 
最后的标签：[输入] 
  

过去，我会继续使用表格为了这。否则，让输入控件正确排列是一种痛苦。

任何人都可以推荐一种简单可靠的方法来实现这种布局而不使用表格吗？

谢谢。

解决方案

您可以使用 display：inline -block

 < style type =text / css> 
 label {display：inline-block;宽度：200px; } 
 ul {list-style：none; } 
< / style> 
 
< ul> 
< li>< label for =input1> A标签：< / label> < input type =textname =input1id =input1>< / li> 
< li>< label for =input2>另一个标签：< / label> < input type =textname =input2id =input2>< / li> 
< li>< label for =input3>最后的标签：< / label> < input type =textname =input3id =input3>< / li> 
< / ul> 
  

然而，为了垂直排列，您必须包装标签输入对在另一个标记中（例如< li> 或< div> ），或者在输入之后放入换行符。 / p>


I have a very simple HTML layout I'm trying to implement. It is something like this:

A Label:         [Input                ]
Another Label:   [Input                ]
The Last Label:  [Input                ]

In the past, I'd just go ahead and use a table for this. Otherwise, it's a pain getting the input controls to line up correctly.

Can anyone suggest a simple and reliable way to implement this layout without using a table?

Thanks.

解决方案

You can use display: inline-block

<style type="text/css">
  label { display: inline-block; width: 200px; }
  ul { list-style: none; }
</style>

<ul>
  <li><label for="input1">A Label:</label> <input type="text" name="input1" id="input1"></li>
  <li><label for="input2">Another Label:</label> <input type="text" name="input2" id="input2"></li>
  <li><label for="input3">The Last Label:</label> <input type="text" name="input3" id="input3"></li>
</ul>

However, in order for this to line up vertically, you either have to wrap the label-input pairs in another tag (such as <li> or <div>) or put linebreaks after the inputs.

这篇关于无表格的布局表格字段的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！