display:inline的用法
所属分类:
网页制作 / CSS
阅读数:
638
收藏 0赞 0分享
<div> DIV1 </div>
<div> DIV2 </div>
这里DIV1和DIV2分别占一行,但是你给他们加上属性后变了
<div style= "display:inline "> DIV1 </div>
<div style= "display:inline "> DIV2 </div>
DIV1和DIV2这时候显示在同一行了,试试看吧
和 display:inline 对应的是 display:block,block 会让应用了该 CSS 属性的 HTML 标记变成块级别元素,例如 SPAN 是行内显示的,但是你加了 display:block 属性就不一样了
<span style= "display:block "> SPAN1 </span>
<span style= "display:block "> SPAN2 </span>
display:inline比较经典的用法是用在 <ul> 下的 <li> 中
内联
block一般一个块占一行,除非float
inline是自动排为一行,就象段内的文字一样,可成为多行。
display:inline 的作用是设置对象做为行内元素显示,
inline是内联对象的默认值(ps:内联对象就是不自动产生换行的元素,比如span)
而我们一般用的div是块级元素,默认display属性是block,
但将div的display设置为inline的话,则多个div可以象span一样显示在一行了。
建议楼主在网上下个css帮助手册
display属性
block : CSS1 块对象的默认值。将对象强制作为块对象呈递,为对象之后添加新行
none : CSS1 隐藏对象。与 visibility 属性的hidden值不同,其不为被隐藏的对象保留其物理空间
inline : CSS1 内联对象的默认值。将对象强制作为内联对象呈递,从对象中删除行
inline-block : IE5.5 将对象呈递为内联对象,但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内
compact : CSS2 未支持。分配对象为块对象或基于内容之上的内联对象
marker : CSS2 未支持。指定内容在容器对象之前或之后。要使用此参数,对象必须和 :after 及 :before 伪元素一起使用
inline-table : CSS2 未支持。将表格显示为无前后换行的内联对象或内联容器
list-item : CSS2 将块对象指定为列表项目。并可以添加可选项目标志
table-caption : CSS2 未支持。将对象作为表格标题显示
table-cell : CSS2 未支持。将对象作为表格单元格显示
table-column : CSS2 未支持。将对象作为表格列显示
table-column-group : CSS2 未支持。将对象作为表格列组显示
table-header-group : CSS2 将对象作为表格标题组显示
table-footer-group : CSS2 将对象作为表格脚注组显示
display:inline 对应不显示为 display:none
display:block 对应不显示为 hidden
说通俗点 样式为none的元素不占位置,而样式为hidden的元素虽然不显示但还是占地方。
CSS入门教程:计算CSS盒模型宽和高
出处:当我们布局一个网页的时候,经常会遇到这样的一种情况,那就是最终网页成型的宽度或是高度会超出我们预先的计算,其实就就是所谓的CSS的盒模型造成的。
#test{margin:10px;padding:10px;width:100px;height:100px;}
收藏 0赞 0分享
在IE流览器中正确显示PNG透明图片
png图片有很好的品质。阴影效果也不会有杂边,很流畅。如果插入网页的话可以给网站内容增色不少!更重要的是在不增加图片容量大小的情况下提高了页面的图片的质量。对于有复杂背景,如:在有颜色过度背景上插入不规则边框的图片带来极大很便利!
但目前IE中对于插入
收藏 0赞 0分享
CSS教程:DIV底部放置文字
css对文字的布局上没有靠容器底部对齐的参数,目前使用的一个不错的方法也比较好.就是用position属性来解决,看下面的代码,用position的相对和绝对定位功能也轻松的实现了,文字靠近div低部对齐,并且靠近的距离还可以精确到像素,自己可以调节,是不是很不错呢?
收藏 0赞 0分享
如何用CSS让文字居于div的底部
这个问题是别人提出的,因为css对文字的布局上没有靠容器底部对齐的参数,(或许有但是我没有发现)不过目前我使用的一个不错的方法也比较好.就是用position属性来解决,看下面的代码,我用position的相对和绝对定位功能也轻松的实现了,文字靠近div低部对齐,并且靠近
收藏 0赞 0分享
从A页面连接到B页面后并直接把B页面的隐藏层显示
这个效果实现的是,在B页面里有两个层,一个显示层,我们暂定名c层,一个是隐藏层,我们暂定名d层,单独进B页面的时候,c层显示,d层隐藏,然而从A页面连接到B页面的时候,则是让d层显示,c层隐藏,我觉得这个效果对网页设计者以后会有很大帮助,现在把代码发出来,
收藏 0赞 0分享
CSS样式表定义标签li前面样式
定义LI前面的小点样式
view plaincopy to clipboardprint?
语法:
list-style-type : disc | circle | square | decimal | lower-roman | upper-roman | lowe
收藏 0赞 0分享
符合标准的div css制作的弹出菜单
本文介绍了五款符合标准的div css制作的弹出菜单,而且不含有js的.
NO.1最基本的:二级dropdown弹出菜单
<!DOCTYPE html PUB
收藏 0赞 0分享
CSS实现在文章每段后面加入带连接的隐藏文字
代码主要理解3个参数:createElement、createTextNode、appendChild。这3个js参数分别是创建元素、创建字符、追加节点。代码原理:循环页面段落标签<p>,创建连接元素<a>,创建要显示的连接字符,用SetAttribute
收藏 0赞 0分享
CSS:浏览器特定选择器介绍
当你想在一个浏览器里改变样式而不像在其他浏览器中改变时,这些选择器很有用。
IE6以下
*html{}
IE 7 以下
*:first-child html {} * html {}
只对IE 7
*:first-child html {}
只对IE 7
收藏 0赞 0分享
WEB标准学习,认识两种网页声明的含义
即网页标准推出来以后,我们时常会看到两种不同的网页的声明,一个是Dhtml,一个是Xhtml。如下所示:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"ht
收藏 0赞 0分享
查看更多