你如何使div元素显示为内联？

在阅读了这个问题和答案几次之后,我所能做的就是假设已经进行了相当多的编辑工作,我怀疑是因为没有提供足够的信息而给出了错误的答案.我的线索来自br标签的使用.

向达里尔道歉.我读了class ="inline"作为style ="display:inline".你有正确的答案,即使你确实使用语义上有问题的类名;-)

错过使用br提供结构布局而不是文本布局对我来说太普遍了.

如果你想在内部放置多个内联元素,divs那么你应该浮动那些div而不是将它们内联.

浮动的div:

===== ======= ==   **** ***** ******   +++++ ++++
===== ==== =====   ******** ***** **   ++ +++++++
=== ======== ===   ******* **** ****   
===== ==== =====                       +++++++ ++
====== == ======

内联div:

====== ==== ===== ===== == ==== *** ******* ***** ***** 
**** ++++ +++ ++ ++++ ++ +++++++ +++ ++++

如果您追求的是前者,那么这就是您的解决方案并丢失这些br标签:

  
block level content or inline content.
  
block level content or inline content.


  
block level content or inline content.
  
block level content or inline content.


  
block level content or inline content.
  
block level content or inline content.

请注意,这些div的宽度是流动的,因此如果要控制行为,请随意在其上放置宽度.

谢谢,史蒂夫

使用display:inline-blockIE6/7的边距和媒体查询:

  
    
  
  
foo
  
bar
  
baz

您应该使用而不是

正确的 内联方式.因为div是块级元素,并且您的要求是内联块级元素.

这是根据您的要求的HTML代码:

 
foo
 
bar
 
baz
`

你有两种方法可以做到这一点

使用简单 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

只需使用带有"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:

Box 1
Box 1
Box 1
Box 1
Box 1

对我没问题 :

toto
toto
toto

？