Html 如何使 div 元素内联显示？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/224602/
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 you make div elements display inline?
提问by Steve
Given this HTML:
鉴于此 HTML：
<div>foo</div><div>bar</div><div>baz</div>
How do you make them display inline like this:
你如何让它们像这样内联显示：
foo bar baz
富巴巴兹
not like this:
不是这样的：
foo
bar
baz
FOO
酒吧
巴兹
回答by Darryl Hein
That's something else then:
那是另一回事：
div.inline { float:left; }
.clearBoth { clear:both; }<div class="inline">1<br />2<br />3</div>
<div class="inline">1<br />2<br />3</div>
<div class="inline">1<br />2<br />3</div>
<br class="clearBoth" /><!-- you may or may not need this -->回答by bochgoch
An inline div is a freak of the web & should be beaten until it becomes a span (at least 9 times out of 10)...
内联 div 是网络的怪胎，应该被打败，直到它变成一个跨度（10 次中至少有 9 次）......
<span>foo</span>
<span>bar</span>
<span>baz</span>
...answers the original question...
...回答原来的问题...
回答by Randy Sugianto 'Yuku'
Try writing it like this:
试着这样写：
div { border: 1px solid #CCC; } <div style="display: inline">a</div>
<div style="display: inline">b</div>
<div style="display: inline">c</div>回答by Steve Perks
Having read this question and the answers a couple of times, all I can do is assume that there's been quite a bit of editing going on, and my suspicion is that you've been given the incorrect answer based on not providing enough information. My clue comes from the use of brtag.
读过这个问题和答案几次后，我所能做的就是假设有相当多的编辑正在进行，我怀疑你因为没有提供足够的信息而得到了错误的答案。我的线索来自br标签的使用。
Apologies to Darryl. I read class="inline" as style="display: inline". You have the right answer, even if you do use semantically questionable class names ;-)
向达里尔道歉。我将 class="inline" 读为 style="display: inline"。您有正确的答案，即使您确实使用了语义上有问题的类名 ;-)
The miss use of brto provide structural layout rather than for textual layout is far too prevalent for my liking.
br用于提供结构布局而不是文本布局的错过使用对我来说太普遍了。
If you're wanting to put more than inline elements inside those divsthen you should be floating those divs rather than making them inline.
如果您想在其中放置更多的内联元素，divs那么您应该浮动这些divs 而不是使它们内联。
Floated divs:
浮动div：
===== ======= == **** ***** ****** +++++ ++++
===== ==== ===== ******** ***** ** ++ +++++++
=== ======== === ******* **** ****
===== ==== ===== +++++++ ++
====== == ======
Inline divs:
内联 div：
====== ==== ===== ===== == ==== *** ******* ***** *****
**** ++++ +++ ++ ++++ ++ +++++++ +++ ++++
If you're after the former, then this is your solution and lose those brtags:
如果您追求前者，那么这就是您的解决方案，并且会丢失这些br标签：
<div style="float: left;" >
<p>block level content or <span>inline content</span>.</p>
<p>block level content or <span>inline content</span>.</p>
</div>
<div style="float: left;" >
<p>block level content or <span>inline content</span>.</p>
<p>block level content or <span>inline content</span>.</p>
</div>
<div style="float: left;" >
<p>block level content or <span>inline content</span>.</p>
<p>block level content or <span>inline content</span>.</p>
</div>
note that the width of these divs is fluid, so feel free to put widths on them if you want to control the behavior.
请注意，这些 div 的宽度是可变的，因此如果您想控制行为，请随意将宽度放在它们上。
Thanks, Steve
谢谢，史蒂夫
回答by Paul Sweatte
Use display:inline-blockwith a margin and media query for IE6/7:
display:inline-block与 IE6/7 的边距和媒体查询一起使用：
<html>
<head>
<style>
div { display:inline-block; }
/* IE6-7 */
@media,
{
div { display: inline; margin-right:10px; }
}
</style>
</head>
<div>foo</div>
<div>bar</div>
<div>baz</div>
</html>
回答by Hidayt Rahman
You should use
<span>instead of<div>for correct way of inline. because div is a block level element, and your requirement is for inline-block level elements.
您应该使用inline 的正确方式
<span>代替。因为 div 是块级元素，而您的要求是内联块级元素。<div>
Here is html code as per your requirements :
这是根据您的要求提供的 html 代码：
<div class="main-div">
<div>foo</div>
<div>bar</div>
<div>baz</div>`
</div>
You've two way to do this
你有两种方法可以做到这一点
- using simple
display:inline-block; - or using
float:left;
- 使用简单
display:inline-block; - 或使用
float:left;
so you've to change display property display:inline-block;forcefully
所以你必须display:inline-block;强行改变显示属性
Example one
示例一
div {
display: inline-block;
}
Example two
示例二
div {
float: left;
}
you need to clear float
你需要清除浮动
.main-div:after {
content: "";
clear: both;
display: table;
}
回答by A. Bender
Just use a wrapper div with "float: left" and put boxes inside also containing float: left:
只需使用带有 "float: left" 的包装 div 并将盒子放在里面也包含 float: left：
CSS:
CSS：
wrapperline{
width: 300px;
float: left;
height: 60px;
background-color:#CCCCCC;}
.boxinside{
width: 50px;
float: left;
height: 50px;
margin: 5px;
background-color:#9C0;
float:left;}
HTML:
HTML：
<div class="wrapperline">
<div class="boxinside">Box 1</div>
<div class="boxinside">Box 1</div>
<div class="boxinside">Box 1</div>
<div class="boxinside">Box 1</div>
<div class="boxinside">Box 1</div>
</div>
回答by Kevin
As mentioned, display:inline is probably what you want. Some browsers also support inline-blocks.
如前所述， display:inline 可能是您想要的。一些浏览器还支持内联块。
回答by flairon
ok, for me :
对我来说还可以 ：
<style type="text/css">
div{
position: relative;
display: inline-block;
width:25px;
height:25px;
}
</style>
<div>toto</div>
<div>toto</div>
<div>toto</div>
回答by Pirat
<span>?
<span>?
