鉴于此HTML:
<div>foo</div><div>bar</div><div>baz</div>
你如何使它们像这样内联显示:
foo bar baz
不是这样的:
foo
bar
baz
Dar*_*ein 255
那就是其他的东西:
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 -->小智 252
内联div是网络的怪人,应该被打败直到它成为一个跨度(至少9次中的10次)...
<span>foo</span>
<span>bar</span>
<span>baz</span>
...回答原来的问题......
Ran*_*ku' 172
尝试这样写:
div { border: 1px solid #CCC; } <div style="display: inline">a</div>
<div style="display: inline">b</div>
<div style="display: inline">c</div>Ste*_*rks 33
在阅读了这个问题和答案几次之后,我所能做的就是假设已经进行了相当多的编辑工作,我怀疑是因为没有提供足够的信息而给出了错误的答案.我的线索来自br标签的使用.
向达里尔道歉.我读了class ="inline"作为style ="display:inline".你有正确的答案,即使你确实使用语义上有问题的类名;-)
错过使用br提供结构布局而不是文本布局对我来说太普遍了.
如果你想在内部放置多个内联元素,divs那么你应该浮动那些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的宽度是流动的,因此如果要控制行为,请随意在其上放置宽度.
谢谢,史蒂夫
Pau*_*tte 24
使用display:inline-blockIE6/7的边距和媒体查询:
<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>
Hid*_*man 11
您应该使用
<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;
}
如上所述,显示:内联可能就是你想要的.有些浏览器也支持内联块.
http://www.quirksmode.org/css/display.html#inlineblock
小智 7
只需使用带有"float:left"的包装div,并将框放在里面也包含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>
小智 6
对我没问题 :
<style type="text/css">
div{
position: relative;
display: inline-block;
width:25px;
height:25px;
}
</style>
<div>toto</div>
<div>toto</div>
<div>toto</div>
| 归档时间： |
|
| 查看次数： |
838202 次 |
| 最近记录： |