Question

我有一个表单，我想在同一行放置一些<div>元素。

我想在与密码相同的行中确认密码。

HTML

<form action="pages/php/signup.php" method="post">
    <div>
        <div>Name :
            <div id="gtext_form">
                <input type="text" name="name" />
            </div>
        </div>
    </div>
    <div class="line">
        <div class="st_column">E-mail :
            <div class="text_form">
                <input type="text" name="email" />
            </div>
        </div>
        <div class="nd_column">Login :
            <div class="text_form">
                <input type="text" name="login" />
            </div>
        </div>
    </div>
    <div class="line">
        <div class="st column">Password :
            <div class="text_form">
                <input type="password" name="password" />
            </div>
        </div>
        <div class="nd_column">Confirm password :
            <div class="text_form">
                <input type="password" name="password2" />
            </div>
        </div>
    </div>
    <div class="line">
        <input type="submit" name="valider" value="  OK   " />
    </div>
</form>

CSS

#gtext_form input {
    width: 640px;
    height: 20px;
}
.text_form input {
    width: 280px;
}
.st_column {
    float: left;
    width: 280px;
    display: inline;
}
.nd_column {
    float: right;
    width: 280px;
    display: inline;
}
.line {
    padding-right:0px;
    padding-left:0px;
    width: 640px;
    height: 60px;
}

JSFiddle

Answer 1

您的班级名称中包含错误：

    <div class="st column">Password :<div class="text_form"><input type="password" name="password"/></div></div>

名称应为 st_column

Answer 2

嗨，你没有密码正确的类在他的html中。它缺失并强调。尝试这样的事情：

JS Fiddle

将您的html密码更改为：class="st_column"

CSS

#gtext_form input {
    width: 640px;
    height: 20px;
}
.text_form input {
    width: 280px;
}
.st_column {
    float: left;
    width: 280px;
    display: inline;
}
.nd_column {
    float: right;
    width: 280px;
    display: inline;
}
.line {
    padding-right:0px;
    padding-left:0px;
    width: 640px;
    height: 60px;
}

Answer 3

在你的第二个<div class="line">

你有一个div：

<div class="st columns">

然而，这应该是：

<div class="st_columns">

JsFiddle

Answer 4

确认密码与密码不在同一行的原因是因为您缺少类名中的_：http://jsfiddle.net/7a9dL/2/

更正了HTML：

<form action="pages/php/signup.php" method="post"> 
<div><div>Name :<div id="gtext_form"><input type="text" name="name"/></div></div></div>
<div class="line">
    <div class="st_column">E-mail :<div class="text_form"><input type="text" name="email"/></div></div>
    <div class="nd_column">Login :<div class="text_form"><input type="text" name="login"/></div></div>
</div>
<div class="line">
    <div class="st_column">Password :<div class="text_form"><input type="password" name="password"/></div></div>
    <div class="nd_column">Confirm password :<div class="text_form"><input type="password" name="password2"/></div></div>
</div>
<div class="line"><input type="submit" name="valider" value="  OK   " /></div>
</form>

Answer 5

尝试添加此内容：

.line div {
    display: inline-block;
}

使用Firefox 27进行测试。

将div放在同一行

5 个答案: