使用div标签在一行上的两个元素？

Question

最终，我们的团队希望摆脱表格，但似乎div标签更难以使用。在上图中，布局是使用表创建的，但我无法弄清楚如何使用div标签来使用基本列结构。如何在同一行上获取这些按钮？ HTML新手在这里。

Answer 1

不太难：

<强> HTML：

<form id="login">
    <div>
        <label for="user">Username:</label>
        <input id="user" type="text" size="20">
    </div>
    <div>
        <label for="pass">Password:</label>
        <input id="pass" type="password" size="20">
    </div>
    <div>
        <input id="cancel" type="reset" value="Cancel">
        <input id="submit" type="submit" value="Login">
    </div>
</form>

<强> CSS：

#login {
    background-color: #FEFEDD;
    border: 3px solid #7F7F7F;
    display: inline-block;
    padding: 20px;
    text-align: right;
}
#login div {
    padding: 5px;
}
#login label {
    font-weight: bold;
    margin-right: 5px;
}
#login #cancel {
    float: left;
}

<强> Live Demo

Answer 2

简而言之，如果你想在同一行中放入许多带div标签的元素，你应该为每个div赋予左浮动和宽度。例如：

<div style="width:50px; float:left;"> Element 1</div>
<div style="width:50px; float:left;"> Element 2</div>
...

Answer 3

使用表格来定位页面上的元素一样糟糕，表单是我经常做的一个例外。当然你可以float你的DIV，但是你要写的代码要比使用表格多得多。另外，我们讨论的是带有行和列的表格格式。如果您不应该使用表格作为表格格式，那么为什么HTML中的标签呢？

Answer 4

如果给元素一个位置：absolute，那么你可以设置left：value和top：value来对齐按钮。

div#cancelbutton {
position: absolute;
top:50px;
left:30px;
}
div#loginbutton {
position:absolute;
top:50px;
left:300px;
}

这将元素 quote ：相对于第一个具有静态位置的父元素。 查看http://www.w3schools.com/Css/css_positioning.asp

Answer 5

也许最好使用float：然后显示：inline-block;因为IE9可以在两行中显示文本框。 查看http://interestingwebs.blogspot.com/2012/10/div-side-by-side-in-one-line.html以获取示例。