如何使div元素内联显示?

给定这个HTML:

<div>foo</div><div>bar</div><div>baz</div>

如何让它们像这样内联显示:

Foo bar baz

不是这样的:

< p > foo < br > 酒吧< br > 巴兹< / p >
1038800 次浏览
小开

试着这样写:

div { border: 1px solid #CCC; }
    <div style="display: inline">a</div>
<div style="display: inline">b</div>
<div style="display: 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>
小开
最佳答案

这是另一回事:

div.inline { float:left; }
.clearBoth { clear: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" /><!-- you may or may not need this -->

小开

<span>吗?

小开

内联div是一个奇怪的web &应该敲打直到它变成一个span(至少10次中的9次)…

<span>foo</span>
<span>bar</span>
<span>baz</span>

.．.回答最初的问题…

小开

如前所述，display:inline可能是您想要的。一些浏览器还支持内联块。

http://www.quirksmode.org/css/display.html#inlineblock

小开

在多次阅读这个问题和答案之后，我所能做的就是假设有相当多的编辑在进行，我的怀疑是，由于没有提供足够的信息，你得到了错误的答案。我的线索来自br标签的使用。

向Darryl道歉。我把class="inline"读为style="display: inline"。你有正确的答案，即使你使用了语义上有问题的类名;-)

没有使用br来提供结构布局而不是文本布局，这对我来说太普遍了。

如果你想在这些divs中放入内联元素以外的元素，那么你应该浮动这些__abc1，而不是使它们成为内联元素。

提出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的宽度是流动的，所以如果你想控制它们的行为，可以随意设置宽度。

< p >谢谢, 史蒂夫。< / p >
小开

我只是倾向于把它们设置为固定宽度，这样它们加起来就是页面的总宽度——可能只有当你使用一个固定宽度的页面时才有用。也“浮动”。

小开

你得控制住这三个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兼容的浏览器。

超文本标记语言

<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中。

小开
我知道人们说这是一个糟糕的想法，但如果你想做一些像平铺图像下面有注释的事情，它在实践中是有用的。例如，Picasaweb使用它来显示相册中的缩略图 参见example/demo http://closure-library.googlecode.com/svn/trunk/closure/goog/demos/inline_block_quirks.html (class goo -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类，现在它神奇地成为一个内联块元素。

小开

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

小开

只需使用包装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>
小开

在IE6/7中使用display:inline-block和margin和media查询:

<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>
小开

我们可以这样做

.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>

http://jsfiddle.net/f8L0y5wx/

小开

对我来说:

<style type="text/css">
div{
position: relative;
display: inline-block;
width:25px;
height:25px;
}
</style>
<div>toto</div>
<div>toto</div>
<div>toto</div>
小开

我认为你可以使用这种方式不使用任何CSS -

<table>
<tr>
<td>foo</td>
</tr>
<tr>
<td>bar</td>
</tr>
<tr>
<td>baz</td>
</tr>
</table>

现在你正在使用块级元素，你会得到一个不想要的结果。你可以使用内联元素，比如span, small等等。

<span>foo</span><span>bar</span><span>baz</span>
小开
你应该使用<span>而不是<div>来代替正确的方式 内联> < /强。因为div是块级元素，而您的要求是内联块级元素。

以下是根据您的要求提供的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;
}
小开 
<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 */
小开

这对我来说很管用。我正在与bootstrap工作，我想有单选按钮内联:

                <div class="form-group form-inline-radio">
<div class="form-check form-radio-outline form-radio-primary mb-3">
<input type="radio" name="formRadio4" id="formRadio4" checked="" class="form-check-input">
<label for="formRadio4" class="form-check-label"> Radio Outline Warning </label>
</div>
<div class="form-check form-radio-outline form-radio-primary mb-3">
<input type="radio" name="formRadio4" id="formRadio4" checked="" class="form-check-input">
<label for="formRadio4" class="form-check-label"> Radio Outline Warning </label>
</div>
</div>

而CSS:

.form-inline-radio {
display: flex;
overflow: hidden;
}


.form-check {
margin-right: 10px;
}

提交答案