CSS Div 在一行
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4063398/
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
Div's in one line
提问by demas
Here is my code:
这是我的代码：
<style type="text/css">
div.page {
text-align:center;
border: 1px solid rgb(0,0,0);
width:20px;
height:20px;
}
span.page {
text-align:center;
border: 1px solid rgb(0,0,0);
width:20px;
height:20px;
}
</style>
<div class="page">1</div>
<div class="page">2</div>
<div class="page">3</div>
<span class="page">1</span>
<span class="page">2</span>
<span class="page">3</span>
Div's look fine but they places vertically. Is there any way to place them horizontally in one line?
Div 看起来不错，但它们垂直放置。有没有办法将它们水平放置在一行中？
Span's place in the one line, but the span can not have the width as any inline element. If there is no way to use DIV's and SPAN's for my task I will use a table, but I am looking for the no-table solution.
跨度在一行中，但跨度不能具有任何内联元素的宽度。如果无法使用 DIV 和 SPAN 来完成我的任务，我将使用表格，但我正在寻找无表格解决方案。
采纳答案by xandy
Lorenzo's answer is correct, but I would add something to the markup:
洛伦佐的回答是正确的，但我会在标记中添加一些内容：
<div class='pageHolder'>
<div class='page'>1</div>
<div class='page'>2</div>
<div class='page'>3</div>
<div class='pageHolder-footer'></div>
</div>
in CSS, add:
在 CSS 中，添加：
div.pageHolder-footer{
clear: left;
height: 0;
}
So that the rest of your stuff will flow correctly.
这样你剩下的东西就会正确流动。
==Alternative method (From Jan, and SitePoint) ==
==替代方法（来自 Jan 和SitePoint）==
No need to have the div.pageHolder-footer (but keep pageHolder). And then:
不需要 div.pageHolder-footer（但保留 pageHolder）。进而：
div.pageHolder { overflow: auto; } /* Jans' method */
/* or */
div.pageHolder { overflow: hidden; } /* From SitePoint */
They both may have drawbacks, but it depends on what you need.
它们都可能有缺点，但这取决于您的需求。
回答by Jan
xandy is correct, but this is better:
xandy 是正确的，但这更好：
<div class='pageHolder'>
<div class='page'>1</div>
<div class='page'>2</div>
<div class='page'>3</div>
</div>
with CSS:
使用 CSS：
.page {
text-align:center;
border: 1px solid rgb(0,0,0);
width:20px;
height:20px;
float: left;
}
.pageHolder{
overflow: auto;
width: 100%;
}
Elements to clear floats is markup. It's like using <br>but for floats. Mixing markup and content is considered bad practice in semantic web.
清除浮动的元素是标记。这就像使用<br>但用于浮动。在语义网中混合标记和内容被认为是不好的做法。
Read this articlefor more information.
阅读这篇文章了解更多信息。
回答by Samuel
Use
用
display:inline-block
in the div's style
在 div 的样式中
回答by Lorenzo
Use this
用这个
div.page {
text-align:center;
border: 1px solid rgb(0,0,0);
width:20px;
height:20px;
float: left;
}
回答by Samuel De Backer
use display:inline;and your div's will be in one line.
使用display:inline;，您的 div 将在一行中。
other solution : float:left;
其他解决方案： float:left;
回答by jforjs
Use display: table-cell; It will solve your issue of div alignment in horizontal order.
使用显示：table-cell；它将解决您的 div 水平顺序对齐问题。
<div class="content">
<div> Page1</div>
<div>Page 2</div>
<div>Page 3</div>
</div>
CSS
CSS
.content > div{
display: table-cell;
}
回答by kadalamittai
You can try out with the combination of ul/li with list-style ( css property ) as none.
您可以尝试将 ul/li 与列表样式（css 属性）组合为 none。
some thing like
就像是
<ul> <li> <div ....</li> <li><div...></li></ul>
or
或者
you can try within table / tds inside divs.
您可以在 div 内的 table / tds 中尝试。
