Question

这样做的方法是什么......

                text | input
           text text | input
                text | input input
      text text text | input

其中text是输入字段input

的标签

UPD通常您可以在用户注册表单中看到这样的布局

Answer 1

CSS：

label {
    float: left;
    text-align: right;
    width: 100px;
    margin-right: 1em;
}

HTML：

<label for="i1">text</label><input id="i1" name="i1" /><br>
<label for="i2">text text</label><input id="i2" name="i2" /><br>
<label for="i3">text</label><input id="i3" name="i3" /> <input id="i5" name="i5" /><br>
<label for="i4">text text text</label><input id="i4" name="i4" /><br>

http://jsfiddle.net/wEcGf/

Answer 2

另一种方法。

HTML：

<div class='form'>
    <p><label>Test</label><input /></p>
    <p><label>Longer test</label><input /></p>
    <p><label>Even longer test</label><input /></p>
</div>

CSS：

.form p {
    clear: both;
    float: none;
}
.form p label {
    display: block;
    float: left;
    text-align: right;
    width: 10em;
}
.form p input {
    float: left;
}

Yelds：http://jsfiddle.net/QWH2J/

您还可以ul使用ol或li。

Answer 3

取决于HTML代码。例如，您可以使用float: left;，float; right和clear: both进行游戏。但是，如果没有至少一些HTML代码，则无法为您提供完整的解决方案。

以下是一个小例子：http://jsfiddle.net/xm5aL/1/

HTML：

<div>
    <label for="input1">Input 1</label>
    <input name="input1" />
    <label for="input2">Some long Input 2</label>
    <input name="input2" />
    <label for="input3">Input 3</label>
    <input name="input3" />
    <label for="input4">short</label>
    <input name="input4" />
    <label for="input5">Input 5</label>
    <input name="input5" />
</div>

CSS：

div {
    width: 20em;
}

label {
    clear: both;
    float: left;
    text-align: right;
    width: 10em;
}

label:after {
    margin: 0em 1em;
    content: " | "
}

input {
    float: right;
    width: 10em;
}

Answer 4

input {
    border: 1px solid #ccc;
    background: #f5f5f5;
    padding-left:5px;
}
label {
    display: block;    
    width:auto;
    width: 100px;
    float: left;
    margin: 2px 6px 6px 4px;
    text-align: right;
    font-weight:bold;
    color:#555;
}
br{
    clear:both;
}

enter image description here

检查http://jsfiddle.net/LW2Ss/3

处的工作示例

Answer 5

请参阅http://jsfiddle.net/fXeX2/

<html>
    <head>
        <title></title>
        <style type="text/css">

            label {
                display: inline;
                float: left;
                width: 10em;
                text-align: right;
            }

            input {
                margin-left: 15em;
                display: block;
            }

        </style>
    </head>
    <body>

        <fieldset>

            <label>text</label>
            <input type="text" style="width:10em;" />

            <label>text</label>
            <input type="text" style="width:10em;" />

            <label>text text</label>
            <input type="text" style="width:20em;" />

            <label>text text text</label>
            <input type="text" style="width:10em;" />

        </fieldset>

    </body>
</html>

什么是css方式来做到这一点

5 个答案:

检查http://jsfiddle.net/LW2Ss/3