使用div标签在同一行上放置两个元素？

Question

使用div标签在同一行上放置两个元素？

asp.nethtml

4

图片描述

我们的团队希望逐渐摆脱表格，但似乎使用 div 标签要难得多。在上面的图片中，该布局是使用表格创建的，但我无法弄清如何使用 div 标签来实现基本列结构。我该如何让这些按钮在同一行上？作为 HTML 新手，请求指导。

- broke

1

http://www.google.co.uk/search?sourceid=chrome&ie=UTF-8&q=css+forms - Quentin

5个回答

6

简而言之，如果您想在同一行中使用多个带有div标签的元素，则应为每个div指定左浮动和宽度。例如：

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

- Samidjo

2

虽然在网页中使用表格来定位元素是不好的，但表单是我经常例外的一种情况。当然你可以使用float来定位DIV，但这需要编写比使用表格更多的代码。而且我们谈论的是一个带有行和列的表格格式。如果不应该使用表格来呈现表格格式，那么为什么HTML中还要有这些标签呢？

- Kon

1

如果您将元素的position属性设置为absolute，则可以设置left和top值来对齐按钮。

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

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

- user657496

谢谢您提供的示例，但是为什么在名称前面要加上div#呢？ - broke

我发现给所有的div都标上ID很有用。 div#cancelbutton是<div id ='cancelbutton'>的选择器，div#loginbutton将选择<div id ='cancelbutton'>。当然，在这种情况下，您也可以使用按钮而不是div（可能更好）。为所有的div、按钮和输入框赋予ID只会使整个视图更清晰易懂。 - user657496

0

也许最好使用float:left而不是display:inline-block，因为IE9可能会将文本框显示在两行中。请查看http://interestingwebs.blogspot.com/2012/10/div-side-by-side-in-one-line.html以获取示例。

- Markweb

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- drudge · Accepted Answer

不算太难： 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