在HTML中以不同方式对齐文本框

Question

如何对齐一组文本框，如下图所示：

我尝试将文本对齐中心，但不能同时获得副本。

提前致谢。

这是我试过的：

        <div  class = "txtBoxMid">

        Lorern Ipsum </br>

        <input type="text" name="name">

        </br>
        </br>

        Lorern Ipsum</br>

        <input type="text" name="name" >

        </br>
        </br>

        Lorern Ipsum</br>

        <input type="text" name="name">

        </div>

        <div class = "txtBoxLeft">
        Lorern Ipsum </br>

        <input type="text" name="name">

        </br>
        </br>

        Lorern Ipsum</br>

        <input type="text" name="name" >

        </br>
        </br>

        Lorern Ipsum</br>

        <input type="text" name="name">

        </div>

CSS：

.txtBoxMid
{

text-align:center;

}

.txtBoxLeft
{
text-align:left;
}

尝试了很多东西。什么都没有用:(

Answer 1

使用float或inline-block来实现这一目标。

Answer 2

您可以通过将每个表单和标签放在父框中并使用以下方式设置该框来轻松完成此操作：

.aBox {
    width: 33%;
    float: left;
}

要使内容居中，只需设置标签框和表单框的样式即可。 E.G：

.label, .formParent {
    text-align: center;
}

这会给你三列。然后你继续添加盒子。例如：

<div class="aBox" id="num1">
    <div class="label">Hello.</div>
    <form class="formParent">
        <input type="text" class="field">
    </form>
</div>
<div class="aBox" id="num2">
    <div class="label">Hello 2.</div>
    <form class="formParent">
        <input type="text" class="field">
    </form>
</div>
<div class="aBox" id="num3">
    <div class="label">Hello 3.</div>
    <form class="formParent">
        <input type="text" class="field">
    </form>
</div>
<div class="aBox" id="num4">
    <div class="label">Hello 4.</div>
    <form class="formParent">
        <input type="text" class="field">
    </form>
</div>
<div class="aBox" id="num5">
    <div class="label">Hello 5.</div>
    <form class="formParent">
        <input type="text" class="field">
    </form>
</div>
<div class="aBox" id="num6">
    <div class="label">Hello 6.</div>
    <form class="formParent">
        <input type="text" class="field">
    </form>
</div>
<div class="aBox" id="num7">
    <div class="label">Hello 7.</div>
    <form class="formParent">
        <input type="text" class="field">
    </form>
</div>
<div class="aBox" id="num8">
    <div class="label">Hello 8.</div>
    <form class="formParent">
        <input type="text" class="field">
    </form>
</div>
<div class="aBox" id="num9">
    <div class="label">Hello 9.</div>
    <form class="formParent">
        <input type="text" class="field">
    </form>
</div>

小提琴：http://jsfiddle.net/U69sh/

Answer 3

我建议使用label元素来包装input，从而包含input元素及其相关文本，并允许点击文本以关注{{1} 1}}：

input

使用CSS：

<form action="#" method="post">
    <label>Label text
        <input />
    </label>
    <!-- other repeated elements removed for brevity -->
</form>

JS Fiddle demo