Html 如何水平对齐跨度或 div？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/225956/
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
How do I align spans or divs horizontally?
提问by Thomas Owens
My only problem is making them line up three-across and have equal spacing. Apparently, spans can not have width and divs (and spans with display:block) don't appear horizontally next to each other. Suggestions?
我唯一的问题是让它们排成三个交叉并具有相等的间距。显然，跨度不能有宽度和 div（以及带有 display:block 的跨度）不会水平地彼此相邻。建议？
<div style='width:30%; text-align:center; float:left; clear:both;'>Is what I have now.
<div style='width:30%; text-align:center; float:left; clear:both;'>是我现在拥有的。
采纳答案by jmcd
You can use divs with the float: left;attribute which will make them appear horizontally next to each other, but then you may need to use clearing on the following elements to make sure they don't overlap.
您可以将 div 与float: left;属性一起使用，这将使它们彼此水平显示，但是您可能需要对以下元素使用清除以确保它们不重叠。
回答by runeh
You can use
您可以使用
.floatybox {
display: inline-block;
width: 123px;
}
If you only need to support browsers that have support for inline blocks. Inline blocks can have width, but are inline, like button elements.
如果您只需要支持支持内联块的浏览器。内联块可以有宽度，但是是内联的，就像按钮元素一样。
Oh, and you might wnat to add vertical-align: top on the elements to make sure things line up
哦，你可能想在元素上添加垂直对齐：顶部以确保对齐
回答by Sam Murray-Sutton
My answer:
我的答案：
<style>
#whatever div {
display: inline;
margin: 0 1em 0 1em;
width: 30%;
}
</style>
<div id="whatever">
<div>content</div>
<div>content</div>
<div>content</div>
</div>
Why?
为什么？
Technically, a Span is an inline element, however it can have width, you just need to set their display property to block first. However, in this context, a div is probably more appropriate, as I'm guessing you want to fill these divs with content.
从技术上讲，Span 是一个内联元素，但是它可以有宽度，您只需要先将它们的 display 属性设置为 block。但是，在这种情况下，div 可能更合适，因为我猜您想用内容填充这些 div。
One thing you definitely don't want to do is have clear:bothset on the divs. Setting it like that will mean that the browser will not allow any elements to sit on the same line as them. The result, your elements will stack up.
你绝对不想做的一件事是clear:both在 div 上设置。这样设置意味着浏览器将不允许任何元素与它们位于同一行。结果，您的元素将堆积起来。
Note, the use of display:inline. This deals with the ie6 margin-doubling bug. You could tackle this in other ways if necessary, for example conditional stylesheets.
注意，使用display:inline. 这涉及 ie6 保证金翻倍错误。如有必要，您可以通过其他方式解决此问题，例如条件样式表。
I've added a wrapper (#whatever) as I'm guessing these won't be the only elements on page, so you'll almost certainly need to segregate them from the other page elements.
我添加了一个包装器 (#whatever)，因为我猜这些不会是页面上唯一的元素，因此您几乎肯定需要将它们与其他页面元素分开。
Anyway, I hope that's helpful.
无论如何，我希望这会有所帮助。
回答by Jeremy B.
you can do:
你可以做：
<div style="float: left;"></div>
or
或者
<div style="display: inline;"></div>
Either one will cause the divs to tile horizontally.
任何一个都会导致 div 水平平铺。
回答by monkey do
I would do it something like this as it gives you 3 even sized columns, even spacing and (even) scales. Note:This is not tested so it might need tweaking for older browsers.
我会这样做，因为它为您提供 3 个大小均匀的列、均匀的间距和（偶数）比例。注意：这未经测试，因此可能需要针对较旧的浏览器进行调整。
<style>
html, body {
margin: 0;
padding: 0;
}
.content {
float: left;
width: 30%;
border:none;
}
.rightcontent {
float: right;
width: 30%;
border:none
}
.hspacer {
width:5%;
float:left;
}
.clear {
clear:both;
}
</style>
<div class="content">content</div>
<div class="hspacer"> </div>
<div class="content">content</div>
<div class="hspacer"> </div>
<div class="rightcontent">content</div>
<div class="clear"></div>
回答by talevineto
I would use:
我会用：
<style>
.all {
display: table;
}
.maincontent {
float: left;
width: 60%;
}
.sidebox {
float: right;
width: 30%;
}
<div class="all">
<div class="maincontent">
MainContent
</div>
<div class="sidebox">
SideboxContent
</div>
</div>
It's the first time I use this 'code tool' from overflow... but shoul do it by now...
这是我第一次从溢出中使用这个“代码工具”......但现在应该这样做......
回答by marcus.greasly
What you might like to do is look up CSS grid based layouts. This layout method involves specifying some CSS classes to align the page contents to a grid structure. It's more closely related to print-bsed layout than web-based, but it's a technique used on a lot of websites to layout the content into a structure without having to resort to tables.
您可能想做的是查找基于 CSS 网格的布局。这种布局方法涉及指定一些 CSS 类来将页面内容与网格结构对齐。与基于 Web 的布局相比，它与基于打印的布局更密切相关，但它是一种在许多网站上使用的技术，可以将内容布局到结构中，而不必求助于表格。
Try this for startersfrom Smashing Magazine.
为Smashing Magazine 的初学者尝试这个。
回答by Nick
Look at the css Float property. http://w3schools.com/css/pr_class_float.asp
查看 css Float 属性。 http://w3schools.com/css/pr_class_float.asp
It works with block elements like div. Alternatively, what are you trying to display, tables aren't evil if you're really trying to show a table of some information.
它适用于像 div 这样的块元素。或者，你想显示什么，如果你真的想显示一些信息的表格，表格并不是邪恶的。
回答by talevineto
<!-- CSS -->
<style rel="stylesheet" type="text/css">
.all { display: table; }
.menu { float: left; width: 30%; }
.content { margin-left: 35%; }
</style>
<!-- HTML -->
<div class="all">
<div class="menu">Menu</div>
<div class="content">Content</div>
</div>
another...
try to use float: left;or right;, change the widthfor other values... it shoul work... also note that the 10% that arent used by the div its betwen them... sorry for bad english :)
另一个...尝试使用float: left;or right;，更改width其他值...它应该可以工作...还要注意 div 未使用的 10% 是它们之间的...抱歉英语不好:)
回答by d1rk
I would try to give them all display: block;attribute and using float: left;.
我会尝试为它们提供所有display: block;属性并使用float: left;.
You can then set widthand/or heightas you like. You can even specify some vertical-alignment rules.
然后您可以设置width和/或height随心所欲。您甚至可以指定一些垂直对齐规则。
