给定这个HTML:
<div>foo</div><div>bar</div><div>baz</div>
如何让它们像这样内联显示:
Foo bar baz
不是这样的:
喷火 酒吧 巴兹
试着这样写:
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>
这是另一回事:
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是网络的一个怪物，应该被打败，直到它变成一个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来提供结构布局，而不是文本布局，这对我来说太普遍了。
如果你想在这些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的宽度是流动的，所以如果你想控制它们的行为，可以随意设置宽度。
谢谢, 史蒂夫
你得控制住这三个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中。
我知道人们说这是一个糟糕的想法，但如果你想做一些像平铺图像下面有注释的事情，它在实践中是有用的。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类，现在它神奇地成为一个内联块元素。
只需使用包装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:
<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>
你有两种方法
使用简单的显示: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;
}
推荐文章
- 使伸缩项目正确浮动
- 如何取消最大高度?
- 形式内联内的形式水平在twitter bootstrap?
- 自定义元素在HTML5中有效吗?
- 如何选择在最后一个子元素之前的元素?
- 如何触发自动填充在谷歌Chrome?
- CSS变换，锯齿边缘在铬
- 创建圈div比使用图像更容易的方法?
- 强迫孩子服从父母的弯曲边界在CSS
- 为什么Chrome浏览器不正确地确定页面是在不同的语言，并提供翻译?
- 在CSS中@apply是什么?
- 在网页上用鼠标模拟震颤(例如帕金森病)?
- Bootstrap抛出Uncaught错误:Bootstrap的JavaScript需要jQuery
- 如何改变文本区域的边框颜色:焦点
- 我如何设置背景颜色为文本的宽度，而不是整个元素的宽度，使用CSS?
