鉴于此HTML：
<div>foo</div><div>bar</div><div>baz</div>
如何使它们像这样内联显示：
foo bar baz
不像这样：
foo
bar
baz
如何使div元素内联显示？
第3587篇《如何使div元素内联显示？》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点
共14个回答
我们可以这样做
.left {
float:left;
margin:3px;
}
<div class="left">foo</div>
<div class="left">bar</div>
<div class="left">baz</div>
我知道有人说这是一个糟糕的主意，但实际上，如果您想进行诸如在其下带有注释的平铺图像之类的操作，它可能会很有用。例如Picasaweb使用它来显示相册中的缩略图。
参见示例/演示http://closure-library.googlecode.com/svn/trunk/closure/goog/demos/inline_block_quirks.html（类goog-inline-block；在这里我将其缩写为ib）
/* below is a set of hacks to make inline-block work right on divs in IE. */
html > body .ib { display:inline-block; }
.ib {display:inline-block;position:relative;}
* html .ib { display: inline; }
:first-child + html .ib { display:inline; }
有了CSS，将div设置为ib类，现在，它神奇地成为一个内联块元素。
我会使用span或将div浮动到左边。浮点数的唯一问题是您必须先清除浮点数，否则包含div的溢出样式必须设置为auto
我可以 ：
<style type="text/css">
div{
position: relative;
display: inline-block;
width:25px;
height:25px;
}
</style>
<div>toto</div>
<div>toto</div>
<div>toto</div>
<span> ？
如前所述，display：inline可能就是您想要的。某些浏览器还支持嵌入式块。
您应该使用
<span>而不是<div>用于inline的正确方法 。因为div是块级元素，而您的要求是内联块级元素。
这是根据您的要求的html代码：
<div class="main-div">
<div>foo</div>
<div>bar</div>
<div>baz</div>`
</div>
您有两种方法可以做到这一点
- 使用简单
display:inline-block; - 或使用
float:left;
因此您必须display:inline-block;强制更改显示属性
例子一
div {
display: inline-block;
}
例子二
div {
float: left;
}
你需要清除浮球
.main-div:after {
content: "";
clear: both;
display: table;
}
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>
只需使用带有“ float：left”的包装div，然后将还包含float：left的盒子放在其中：
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：
<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>
阅读了这个问题和答案几次后，我所能做的就是假设您进行了大量的编辑，并且我怀疑您由于没有提供足够的信息而得到了错误的答案。我的线索来自br标签的使用。
向达里尔道歉。我将class =“ inline”读为style =“ display：inline”。即使您确实使用了语义可疑的类名称，您也将获得正确的答案；-)
br就我的喜好而言，错过了提供结构布局而不是文本布局的用法太普遍了。
如果要在这些元素中放置多个内联元素divs，则应浮动这些div而不是使它们内联。
浮动div：
===== ======= == **** ***** ****** +++++ ++++
===== ==== ===== ******** ***** ** ++ +++++++
=== ======== === ******* **** ****
===== ==== ===== +++++++ ++
====== == ======
内嵌div：
====== ==== ===== ===== == ==== *** ******* ***** *****
**** ++++ +++ ++ ++++ ++ +++++++ +++ ++++
如果您追求前者，那么这就是您的解决方案，并且会丢失这些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>
请注意，这些div的宽度是可变的，因此，如果要控制行为，请随意在其上放置宽度。
谢谢，史蒂夫
尝试这样写：
div { border: 1px solid #CCC; } <div style="display: inline">a</div>
<div style="display: inline">b</div>
<div style="display: inline">c</div>内联div是网络上的怪胎，应加以击败，直到它变成跨度（至少10次中有9次）...
<span>foo</span>
<span>bar</span>
<span>baz</span>
...回答原始问题...
那是另一回事：
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 -->相似问题
问题类别
我认为您可以使用这种方式而无需使用任何CSS-
现在，您正在以这种方式使用块级元素，从而得到不需要的结果。因此，您可以内联元素，例如span，small等。