给定这个HTML:
<div>foo</div><div>bar</div><div>baz</div>
如何让它们像这样内联显示:
Foo bar baz
不是这样的:
喷火 酒吧 巴兹
给定这个HTML:
<div>foo</div><div>bar</div><div>baz</div>
如何让它们像这样内联显示:
Foo bar baz
不是这样的:
喷火 酒吧 巴兹
当前回答
<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 */
其他回答
<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>
http://jsfiddle.net/f8L0y5wx/
<style type="text/css">
div.inline { display:inline; }
</style>
<div class="inline">a</div>
<div class="inline">b</div>
<div class="inline">c</div>
试着这样写:
div{边界:1px固体#CCC;的 <div style=“显示:inline”>a</div> <div style=“显示:inline”>b</div> <div style=“显示:inline”>c</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 */
我知道人们说这是一个糟糕的想法,但如果你想做一些像平铺图像下面有注释的事情,它在实践中是有用的。Picasaweb使用它来显示相册中的缩略图。 参见示例/demo 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类,现在它神奇地成为一个内联块元素。