给定这个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>

其他回答

试着这样写:

div{边界:1px固体#CCC;的 <div style=“显示:inline”>a</div> <div style=“显示:inline”>b</div> <div style=“显示:inline”>c</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>

我会使用span或将div向左浮动。浮动的唯一问题是,你必须清除浮动之后,或包含div必须有溢出样式设置为auto

你应该使用<span>而不是<div> 内联。因为div是块级元素,而您的要求是内联块级元素。

以下是根据您的要求提供的html代码:

<div class="main-div">
 <div>foo</div>
 <div>bar</div>
 <div>baz</div>`
</div>

你有两种方法


使用简单的显示:inline-block; 或者使用float:left;

所以你需要改变显示属性display:inline-block;有力地

一个例子

div {
    display: inline-block;
}

两个例子

div {
    float: left;
}

你需要清除浮动

.main-div:after {
    content: "";
    clear: both;
    display: table;
}