css - 将div放在同一行

标签 css html

我有一个表格,我想在其中放置一些 <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

最佳答案

你的类名有错误:

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

名称应该是st_column

关于css - 将div放在同一行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22563027/

相关文章:

html - CSS3 旋转回弹

html - CSS 问题导致整个导航栏下拉

javascript - 如何从express\nodeJS中的post请求获取数据并在提交后将用户重定向到html文件

html - div 不会在 IE 10 中对齐,但在 Firefox 中工作正常

html - Internet Explorer 9 不显示 PNG 图像

javascript - 如何在纯 HTML5/CSS/Jquery 中显示 epub 格式的书

javascript - JQuery ScrollTo 无法使用高度和宽度 100%

html - 如何在 Angular js 中使用 Bootstrap 样式修复表头(thead)

javascript - JS中单词之间的空格

html - 如何拥有非固定的全屏背景图像?