你如何使div元素内联显示？
鉴于这个HTML：
<div>foo</div><div>bar</div><div>baz</div> 你如何让他们像这样内联显示：
foo吧baz
不是这样的：
FOO
酒吧
巴兹
那是另一回事：
<style type="text/css"> div.inline { float:left; } .clearBoth { clear:both; } </style> <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 -->
一个内联div是一个networking怪胎，应该被打败，直到它成为一个跨度（至less9倍于10）…
<span>foo</span> <span>bar</span> <span>baz</span>
回答原来的问题
尝试像这样写：
<div style="display: inline">a</div> <div style="display: inline">b</div> <div style="display: inline">c</div>
读过这个问题和答案几次，我所能做的就是假设已经进行了相当多的编辑工作，而且我怀疑是因为没有提供足够的信息而给出了错误的答案。 我的线索来自br标签的使用。
道歉Darryl。 我读class =“inline”为style =“display：inline”。 你有正确的答案，即使你使用语义上有问题的类名称;-)
用br来提供结构布局而不是用于文本布局的想法太过于stream行了。
如果你想把更多的内联元素放在这些divs那么你应该漂浮这些div而不是内联。
浮动divs：
===== ======= == **** ***** ****** +++++ ++++ ===== ==== ===== ******** ***** ** ++ +++++++ === ======== === ******* **** **** ===== ==== ===== +++++++ ++ ====== == ======
内联div：
====== ==== ===== ===== == ==== *** ******* ***** ***** **** ++++ +++ ++ ++++ ++ +++++++ +++ ++++
如果你是在前者之后，那么这是你的解决scheme，并且失去那些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的宽度是stream畅的，所以如果您想要控制行为，请随意在其上放置宽度。
谢谢，史蒂夫
对于IE6 / 7，使用display:inline-block带边距和媒体查询：
<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，并把箱子里面也包含浮法：左：
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>
<span> ？
如上所述，显示：内联可能是你想要的。 一些浏览器也支持embedded块。
您应该使用
<span>而不是<div>作为内联的正确方式。 因为div是块级元素，而您的要求是embedded块级元素。
这里是根据您的要求的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; }
对我来说还可以 ：
<style type="text/css"> div{ position: relative; display: inline-block; width:25px; height:25px; } </style> <div>toto</div> <div>toto</div> <div>toto</div>
我会使用跨度或浮动左div。 浮动唯一的问题是，你必须清除之后浮动或包含div必须有溢出风格设置为自动
我知道人们说这是一个糟糕的主意，但是如果你想做一些像平铺的图像一样的东西，那么它在实践中会很有用。 例如Picasaweb使用它来显示相册中的缩略图。
看例子/演示http://closure-library.googlecode.com/svn/trunk/closure/goog/demos/inline_block_quirks.html（class 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，现在它是一个神奇的内联块元素。
你需要包含三个div。 这里是一个例子：
CSS
div.contain { margin:3%; border: none; height: auto; width: auto; float: left; } div.contain div { display:inline; width:200px; height:300px; padding: 15px; margin: auto; border:1px solid red; background-color:#fffff7; -moz-border-radius:25px; /* Firefox */ border-radius:25px; }
注意：border-radius属性是可选的，只能在兼容CSS3的浏览器中使用。
HTML
<div class="contain"> <div>Foo</div> </div> <div class="contain"> <div>Bar</div> </div> <div class="contain"> <div>Baz</div> </div>
请注意，div的'foo''bar'和'baz'分别被保存在'contains'div中。
<style type="text/css"> div.inline { display:inline; } </style> <div class="inline">a</div> <div class="inline">b</div> <div class="inline">c</div>
我们可以这样做
.left { float:left; margin:3px; } <div class="left">foo</div> <div class="left">bar</div> <div class="left">baz</div>
<div class="cdiv"> <div class="inline"><p>para 1</p></div> <div class="inline"> <p>para 1</p> <span>para 2</span> <h1>para 3</h1> </div> <div class="inline"><p>para 1</p></div>
<div>foo</div><div>bar</div><div>baz</div> //solution 1 <style> #div01, #div02, #div03 { float:left; width:2%; } </style> <div id="div01">foo</div><div id="div02">bar</div><div id="div03">baz</div> //solution 2 <style> #div01, #div02, #div03 { display:inline; padding-left:5px; } </style> <div id="div01">foo</div><div id="div02">bar</div><div id="div03">baz</div> /* I think this would help but if you have any other thoughts just let me knw kk */
我只是倾向于使他们固定宽度，以便他们加起来的页面的总宽度 – 可能只适用于如果您使用固定宽度的页面。 也“浮动”。
我想你可以使用这种方式，而不使用任何CSS –
<table> <tr> <td>foo</td> </tr> <tr> <td>bar</td> </tr> <tr> <td>baz</td> </tr> </table>
