给定这个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与"float: left",并将盒子也包含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>
其他回答
只需使用包装div与"float: left",并将盒子也包含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>
对我来说:
<style type="text/css">
div{
position: relative;
display: inline-block;
width:25px;
height:25px;
}
</style>
<div>toto</div>
<div>toto</div>
<div>toto</div>
我们可以这样做
.left {
float:left;
margin:3px;
}
<div class="left">foo</div>
<div class="left">bar</div>
<div class="left">baz</div>
试着这样写:
div{边界:1px固体#CCC;的 <div style=“显示:inline”>a</div> <div style=“显示:inline”>b</div> <div style=“显示:inline”>c</div>
在多次阅读这个问题和答案之后,我所能做的就是假设有相当多的编辑在进行,我的怀疑是,由于没有提供足够的信息,你得到了错误的答案。我的线索来自br标签的使用。
向Darryl道歉。我把class="inline"读为style="display: inline"。你有正确的答案,即使你使用了语义上有问题的类名;-)
没有使用br来提供结构布局,而不是文本布局,这对我来说太普遍了。
如果你想在这些div中放置更多的内联元素,那么你应该浮动这些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的宽度是流动的,所以如果你想控制它们的行为,可以随意设置宽度。
谢谢, 史蒂夫