关闭

display:block、inline、inline-block

标签: css前端.net
261人阅读 评论(19) 收藏 举报
分类:

display:block就是将元素显示为块级元素,总是在新行上开始。高度,行高以及顶和底边距都可控制。

	<div class="fitem" style="display:block">
                <label style="width:80px">密码:</label>
                <input id="dlg_pwd" class="easyui-textbox" type="password" />
	</div>
 	<div class="fitem" style="display:block">
                <label style="width:80px">确认密码:</label>
                <input id="dlg_confirmpwd" class="easyui-textbox" type="password" />
	</div>
效果图:


display:inline就是将元素显示为行内元素,和其他元素都在一行上高,行高及顶和底边距不可改变。

	<div class="fitem" style="display:inline">
                <label style="width:80px">密码:</label>
                <input id="dlg_pwd" class="easyui-textbox" type="password" />
	</div>
 	<div class="fitem" style="display:inline">
                <label style="width:80px">确认密码:</label>
                <input id="dlg_confirmpwd" class="easyui-textbox" type="password" />
	</div>
效果图:


display:inline-block将对象呈递为内联对象,但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内,允许空格。

	<div class="fitem" style="display:inline-block">
                <label style="width:80px">密码:</label>
                <input id="dlg_pwd" class="easyui-textbox" type="password" />
	</div>
 	<div class="fitem" style="display:inline-block">
                <label style="width:80px">确认密码:</label>
                <input id="dlg_confirmpwd" class="easyui-textbox" type="password" />
	</div>
效果图:

PS:第三种方法默认左对齐,如果需要文字右对齐设置CSS即可。

0
0
查看评论
发表评论
* 以上用户言论只代表其个人钱柜娱乐开户,不代表CSDN网站的钱柜娱乐开户或立场

让IE、Firefox、Chrome中的LI都支持display-block的兼容写法

转自:http://www.cnblogs.com/langzs/archive/2012/03/08/2385087.html   在制作简易模板时,店招的导航条结构大致如下: div clas...
  • Kinleyhao
  • Kinleyhao
  • 2014-03-07 16:04
  • 2640

css强制换行和强制不换行

转自:http://chenfengming.cn/front-end/css-qiang-zhi-huan-xing-he-qiang-zhi-bu-huan-xing.html 中文情况...
  • ystyaoshengting
  • ystyaoshengting
  • 2015-05-21 20:12
  • 3216

关于display的属性:block和inline-block以及inline的区别

介绍一些简单的布局,block,inline-block,inline的简单区别,处女作哈哈
  • sinat_31311369
  • sinat_31311369
  • 2016-09-03 20:48
  • 1679

【CSS笔记之十】深入认识display:inline-block和hasLayout

【CSS笔记之十】display:inline-block和hasLayout hasLayout设计的初衷是用于辅助块级元素的盒子模型的,它是用于块级元素的。如果用于行内元素,会引发一些特殊效果。...
  • freshlover
  • freshlover
  • 2012-05-16 18:21
  • 3800

“display:block-inline形式的Span或Div中添加文字后,导致Span或Div排版掉落、错位”的原因及解决方法

在开始用display:inline-block的时候,只知道有baseline这么一说,而且当时记笔记解决了空隙问题,百度一堆文章,什么终极解决办法等等,还记录了一些问题,当时不明白,到今天才明白v...
  • Esther_Heesch
  • Esther_Heesch
  • 2016-05-07 23:34
  • 5845

拜拜了,浮动布局-基于display:inline-block的列表布局

 by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu.com/wordpress/?p=1194...
  • u012998394
  • u012998394
  • 2014-10-21 19:20
  • 389

H5面试——display:inline-block问题总结

1、将块元素转化为内联元素时,内联块之间会有一小段空白。 解决方法: (1)给父容器加font-size:0,子元素另行设置 (2)父元素Letter-spacing:-3p...
  • cq7421
  • cq7421
  • 2017-08-02 20:53
  • 407

关于input元素 和display:inline-block 的元素不在一水平线上的一点发现

每次用到了 元素 和inline-block的(不一定是span,其他一些inline的元素也是一样)元素,他们总是会不在一个水平线上,有时候用浮动可以解决。 但是有的时候并不想用浮动解决,这时候可以...
  • acknowledged
  • acknowledged
  • 2016-08-31 14:13
  • 2131

display:inline-block列表布局经常会遇到的“换行符/空格间隙问题”

居中导航 ul{text-align: center;height: 30px;line-height: 30px;/*background-color: #f00*/;} ...
  • love_chenfeng
  • love_chenfeng
  • 2016-04-28 15:14
  • 2080

Html中display为inline-block的元素有内容和没有内容情况下高度不一致问题的讨论

这两天发现一个问题,就是display为inline-block的元素有内容和没有内容情况下高度不一致,这对于有强迫症的喔来说是受不了的 于是我就进行了一系列的测试来找问题 发生的原因如下...
  • u011060906
  • u011060906
  • 2017-06-17 18:07
  • 349
    个人资料
    • 访问:281489次
    • 积分:5585
    • 等级:
    • 排名:第5476名
    • 原创:64篇
    • 转载:3篇
    • 译文:0篇
    • 评论:1677条
    文章分类
    最新评论