Question

我正在尝试将div中的文本字段对齐并使它们向左浮动，以使它们看起来像一个表格。

我想要一个如下布局：

Label1: TextField    Label2: TextField     Label3: TextField
Label4: TextField    Label5: TextField     Label6: TextField

我试图这样做，但它不会是正确的。 http://jsbin.com/izuwi3/edit

Answer 1

我把它放在一起非常快，所以它肯定可以改进，但是这样的事情怎么样？

http://jsfiddle.net/LBcp5/1/

我正在做的主要是创建一个容器，用于表中的行。我这样做的方式如下：

<div class="row">
   // put whatever you want in here
</div>

...我正在使用row为这个clear: both类设置样式，以便每行都有自己的行。您可以根据需要在每行中添加<div>个元素，然后将它们浮动到左侧或使用display: inline来获得所需的效果。

因此，当您需要多行时，可以创建多个这些row容器。查看上面的jsFiddle演示示例。

我希望这会有所帮助。

Answer 2

也许您正在寻找something like this？

HTML：

<form>
    <div id="wrapper">
        <div id="left">
            <div class="label-container">
            <label for="label1">Label1</label>
            <input name="label1" type="text">
            </div>
            <div class="label-container">
            <label for="label4">Label4</label>
            <input name="label4" type="text">
            </div>
        </div>
        <div id="center">
            <div class="label-container">
            <label for="label2">Label2</label>
            <input name="label2" type="text">
            </div>
            <div class="label-container">
            <label for="label5">Label5</label>
            <input name="label5" type="text">
            </div>
        </div>
        <div id="right">
            <div class="label-container">
            <label for="label3">Label3</label>
            <input name="label3" type="text">
            </div>
            <div class="label-container">
            <label for="label6">Label6</label>
            <input name="label6" type="text">
            </div>
        </div>
    </div>
</form>

CSS：

#wrapper
{
    width: 800px;
}

#left,
#center,
#right
{
    float: left;
}

.label-container
{
    margin: 10px 10px;
}

：）

Answer 3

嗯，您可以将每个列放在fieldset标记中，将其display属性设置为阻止，将float设置为左< / strong>并将width设置为所需的值。

我认为它总是会使用某些标记（如span或div）来对这些字段进行分组，但是fieldset标记是最理想的标记，因为它完全是为表单字段分组而发明的：）

Answer 4

你可以这样做：

<div style="clear:both;">
    <div style="float:left;">
        <label for="TextField1">Label1:</label>
        <input id="TextField1" value="TextField"></input>
    </div>
    <div style="float:left;">
        <label for="TextField2" style="padding-left:50px">Label2:</label>
        <input id="TextField2" value="TextField"></input>
    </div>
    <div style="float:left;">
        <label for="TextField3" style="padding-left:50px">Label3:</label>
        <input id="TextField3" value="TextField"></input>
    </div>
</div>
<div style="clear:both;">
    <div style="float:left;">
        <label for="TextField4">Label4:</label>
        <input id="TextField4" value="TextField"></input>
    </div>
    <div style="float:left;">
        <label for="TextField5" style="padding-left:50px">Label5:</label>
        <input id="TextField5" value="TextField"></input>
    </div>
    <div style="float:left;">
        <label for="TextField6" style="padding-left:50px">Label6:</label>
        <input id="TextField6" value="TextField"></input>
    </div>
</div>

Answer 5

使用此html标记

align="center"

如果您不想将它们放在中心位置，

中心可以替代左侧或右侧

正确的方法是将html链接到CSS文件并将每个div分配给CSS文件中的某种类型的类，这有助于避免冗余。为此，请创建一个css文件通过将其包含在您的html代码

中将其链接到html

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>

然后在你的mystyle.css文件中你必须包含这样的东西

DIV.Left{text-align:left;}
DIV.Center{text-align:center;}
DIV.Right{text-align:right;}

然后你的html文件div看起来像

<div class="left"></div>
<div class="center"></div>
<div class="right"></div>

如何在div中对齐文本字段

5 个答案: