给定这个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
不是这样的:
喷火 酒吧 巴兹
当前回答
对我来说:
<style type="text/css">
div{
position: relative;
display: inline-block;
width:25px;
height:25px;
}
</style>
<div>toto</div>
<div>toto</div>
<div>toto</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的宽度是流动的,所以如果你想控制它们的行为,可以随意设置宽度。
谢谢, 史蒂夫
如前所述,display:inline可能是您想要的。一些浏览器还支持内联块。
http://www.quirksmode.org/css/display.html#inlineblock
这是另一回事:
Div.inline{浮动:左;} .clearBoth{清除: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" /><!——你可能需要,也可能不需要——>
你得控制住这三个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中。
<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 */