Html 一行上的两个元素使用 div 标签？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5303193/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Two elements on one line using div tags?
提问by broke
Eventually, our team would like to move away from tables, but it seems like div tags are so much harder to use. In the above image, the layout was created using a table, but I cant figure out how to get a basic column structure working using div tags. How can I get those buttons on the same line? HTML newbie here.
最终，我们的团队希望远离表格，但似乎 div 标签更难使用。在上图中，布局是使用表格创建的，但我无法弄清楚如何使用 div 标签获得基本的列结构。我怎样才能在同一行上获得这些按钮？HTML新手在这里。
回答by drudge
Not too difficult:
不太难：
HTML:
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:
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;
}
回答by Samidjo
To be short, if you want to put many elements with div tags in the same line you should give for each div a left float and a width. For example:
简而言之，如果您想将许多带有 div 标签的元素放在同一行中，您应该为每个 div 提供一个左浮动和一个宽度。例如：
<div style="width:50px; float:left;"> Element 1</div>
<div style="width:50px; float:left;"> Element 2</div>
...
回答by Kon
As bad as it is to use tables for positioning elements on a page, forms is one exception I often make. Sure you can floatyour DIVs, but you're going to write a lot more code to do that than using tables. Plus we're talking about a tabularformat with rows and columns. If you're not supposed to use tables for a tabular format, then why have the tags in the HTML at all?
尽管使用表格在页面上定位元素很糟糕，但表单是我经常做的一个例外。当然，您可以浮动DIV，但与使用表格相比，您将要编写更多代码来实现此目的。另外，我们正在谈论带有行和列的表格格式。如果您不应该将表格用于表格格式，那么为什么要在 HTML 中使用标签呢？
回答by rsplak
If you give the elements a position:absolute then you can set the left: value and the top:value to align the buttons.
如果你给元素一个 position:absolute 那么你可以设置 left: value 和 top:value 来对齐按钮。
div#cancelbutton {
position: absolute;
top:50px;
left:30px;
}
div#loginbutton {
position:absolute;
top:50px;
left:300px;
}
This will place the element quote: relative to the first parent element that has a position other than static. Check out http://www.w3schools.com/Css/css_positioning.asp
这将放置元素quote: 相对于具有非静态位置的第一个父元素。查看http://www.w3schools.com/Css/css_positioning.asp
回答by Markweb
Maybee is better to use float:let then display: inline-block; because IE9 could display textboxes in two rows. Check http://interestingwebs.blogspot.com/2012/10/div-side-by-side-in-one-line.htmlfor examples.
Maybee 最好使用 float:let 然后 display: inline-block; 因为 IE9 可以在两行中显示文本框。检查http://interestingwebs.blogspot.com/2012/10/div-side-by-side-in-one-line.html以获取示例。
