使用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;
}

现场演示

Answer 2

简而言之,如果你想在同一行中放入带有div标签的许多元素,你应该为每个div赋予左浮点数和宽度.例如:

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