如何在不使用表格的情况下排列我的文本框？html/css
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1649509/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I line up my textboxes without using a table? html/css
提问by NibblyPig
I want to display:
我想显示：
Name [Textbox]
Age: [Textbox]
BlahBlahCatfish: [Textbox]
but if I simply plonk the code in, it gets lined up exactly as its lined up above.
但是如果我只是简单地输入代码，它就会完全按照上面的顺序排列。
What I want is for it to be lined up like this:
我想要的是让它像这样排列：
Name: [Textbox]
Age: [Textbox]
BlahBlahCatfish: [Textbox]
Ordinarly I would use a Table but I am trying to get out of that habit and use lovely CSS. Ideas of how to do this without billions of divs and stuff?
通常我会使用表格，但我正在努力摆脱这种习惯并使用可爱的 CSS。在没有数十亿个 div 和其他东西的情况下如何做到这一点的想法？
回答by Daniel A. White
Here is a site I did that does that.
这是我做的一个网站。
http://acm.cs.kent.edu/contact/form.php
http://acm.cs.kent.edu/contact/form.php
Basically its like this
基本上是这样的
<p>
<label for="someTextBox" >Text</label>
<input type="text" id="someTextBox" />
</p>
p label {
display: inline-block;
width: x;
}
p input {
width: y;
}
回答by Paul
I use the 960 Grid Systemto handle form based layout, in particular I found the Fluid 960 Grid Systemmost useful.
我使用960 Grid System来处理基于表单的布局，特别是我发现Fluid 960 Grid System最有用。
It's a simple and structured approach to layout, worth investing a little time to learn this as it will save you so much time in the future.
这是一种简单且结构化的布局方法，值得花一点时间来学习这一点，因为它将在未来为您节省很多时间。
Another handy tool is the Gridderbookmarklet to aide layout.
另一个方便的工具是用于辅助布局的Gridder书签。
There are other CSS frameworks such as Blueprintwhich are equally as good.
还有其他 CSS 框架，例如Blueprint，它们也同样出色。
回答by xtofl
use a "left" and a "right" class, and make them float:leftand float:right, respectively. The text would then go in a <div class="right">, and the attribute name in a <div class="left">.
使用“左”和“右”类，并分别制作它们float:left和float:right。然后文本将放入 a <div class="right">，属性名称放入 a <div class="left">。
