display:block 与 display:inline 用法 - Loiy - ITeye博客

`

lzj0470

浏览: 1247012 次
性别:
来自: 深圳

最近访客更多访客>>

hedgehog12

chen88358323

wyx065747

jklwan

博主相关

博客

微博

相册

收藏

留言

关于我

文章分类

社区版块

存档分类

最新评论

水野哲也：不不不, 这个您真错了!其实是你引用的那个jsp和本身的jsp ...
解析关于jsp页面指令冲突问题contentType="text/html;charset=UTF-8"
caobo_cb： import xx.cn.weibo.Util;
[ java版]新浪微博之ruquest_token篇
caobo_cb：你好 Util包没有
[ java版]新浪微博之ruquest_token篇
小桔子：你好！我遇到个问题 max_allowed_packet值总是 ...
mysql查询占用内存,优化的技巧
donghustone：谢谢大神！
用JSmooth制作java jar文件的可执行exe文件教程(图文)

display:block 与 display:inline 用法

博客分类：

css

阅读更多

display:block 让块级元素变成行级元素。而display:inline则相反。如：

span默认是块级元素

div默认是行级元素

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style>
.boder{border: 1px solid #666;}
</style>
</head>
<body>
	<div class="boder">
		<span>我是块级元素</span>
		<span>我是块级元素</span>
	</div>
	<div class="boder">
		<span style="display:block;">我被加了“display:block;”，变成行级元素</span>
		<span style="display:block;">我被加了“display:block;”，变成行级元素</span>
	</div>
</body>
</html>

分享到：

div 里面放H2，div会被撑大？ | css padding在ie6,ie8,firefox中兼容性用 ...

2013-09-05 23:11
浏览 779
评论(0)
分类:开源软件
查看更多

评论

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

[转]关于display: inline,block,inline-block 的详细应用: NULL 博文链接：https://hc24.iteye.com/blog/832493

CSS属性display:inline-block用法深入理解: 本文向大家描述一下CSS属性display:inline-block的用法,在使用CSS实现表现的时候，会经常接触到display:inline-block这一属性;可以将对象呈递为内联对象，但是对象的内容作为块对象呈递，旁边的内联对象会被呈递在...

有关display:inline-block在FF出现空白的解决方案: NULL 博文链接：https://qiyan86-163-com.iteye.com/blog/551754

display:inline的用法: <div> DIV1 </div> <div> DIV2 ...和 display:inline 对应的是 display:block，block 会让应用了该 CSS 属性的 HTML 标记变成块级别元素，例如 SPAN 是行内显示的，但是你加了 display:block 属性就不一样了 <span

display:inline、block、inline-block的区别（转的）: NULL 博文链接：https://tianqiushi.iteye.com/blog/2101378

深入解析CSS的display:inline-block属性的使用: 但是，由于display:inline-block最大的不同就是其没有父元素的匿名包裹特性，这使得display:inline-block属性的使用非常自由，可与文字，图片混排，可内嵌block属性元素，可以可以置身于inline水平的元素中。...

span掉落的演示代码: 博文 “display:block-inline形式的Span或Div中添加文字后，导致Span或Div排版掉落、错位”的原因及解决方法里的示例代码

关于css display: inline block inline-block的区别分析: display:inline-block 将对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内，允许空格。但对于这个属性不是所有浏览器都识别。支持的浏览器有：Opera、Safari。但很遗憾，最...

让IE6/IE7支持display:inline-block属性的两种方法: 有两种方式解决这个问题，让IE6/IE7 支持 display:inline-block 的方法。复制代码代码如下:<ul> <li></li> <li></li> <li></li> 1.先使用display:inline-block，再使用display:inline，如下：复制代码代码如下:ul...

display:inline-block的使用示例: 建立一个宽度很长的一个页面，里面包含许多列，外面的div块的宽度不能确定，若是外面的div块的宽度不够就会导致部分子div块移动到下面的一行，下面与大家分享下display:inline-block的使用示例

display:inline-block的原理分析: 在使用 CSS 实现表现的时候，会经常接触到 display:inline-block 这一属性，无论是初接触 Web 标准还是接触标准已久的朋友，大都会对这一属性感觉很迷惑和模糊。复制代码代码如下: display:inline-block 将对象...

如何解决IE6/IE7不识别display:inline-block属性: 还有一种方法就是设置li为display:inline;这样可以达到同样的效果，但是问题是inline元素的特性：默认无法设置宽度，高度，以及上下margin，（关于padding，情况有点特殊，在ie6，7中 inline元素是无法设置上下...

深入display:inline-block: 在使用 CSS 实现表现的时候，会经常接触到 display:inline-block 这一属性，无论是初接触 Web 标准还是接触标准已久的朋友，大都会对这一属性感觉很迷惑和模糊。display:inline-block 将对象呈递为内联对象，但是...

display:inline-block的实际应用: NULL 博文链接：https://qiyan86-163-com.iteye.com/blog/554746

标签设置display：none后设置diplay=“”不显示1: 设置display：none后不能通过设置display：“”显示得要用block或者inline。

css之display属性之inline-block布局实现详解: DOCTYPE，则 Internet Explorer 8 （以及更高版本）支持属性值 "inline-table"、"run-in"、"table"、"table-caption"、"table-cell"、"table-column"、"table-column-group"、"table-row"、"table-row-group"、以及 ...

Global site tag (gtag.js) - Google Analytics