inline-block

display:inline-block的优缺点

由 爷，独闯天下 提交于 2020-01-12 16:13:26
display:inline-block的优缺点 优点 ：将元素设置为行内块元素，既有行内元素可以一行显示多个元素的特性，又有块元素可以设置宽高的特性。 缺点 ：设置为display:inline-block后，元素与元素之间会多出空格间隙 空隙产生的原因： 当元素有行内元素的特性时，元素间的空白符都会被解析，回车换行会被解析成一个空白符，如果字体不为零那么就会占一定的宽度，并且这些间距会随字体的大小而变化 解决办法 1、写代码时元素间不换行，中间不留空隙，但这样 会导致代码的可读性变差。 2、父元素设置font-size:0px;在子元素上设置想要的字体大小，但万一后面有很多的子元素，这种方法会导致代码冗余。 3、父元素设置display:table;word-spacing:-1em; 4、子元素设置浮动，如果这样做会显得display:inlline-block有点多余，因为块元素设置浮动就能在同一行了，为什么还要设display:inlline-block呢？而且都要清除浮动带来的父盒子塌陷问题。 5、子元素设置margin-left:负数px;(不兼容，不推荐) 来源： CSDN 作者： 有理想，有期待 链接： https://blog.csdn.net/qq_41818857/article/details/103945364

CSS布局方式--inline-block 布局

由 佐手、 提交于 2020-01-06 19:53:23
布局其实就是想办法怎样将一些元素横向的排列起来，纵向由于块级元素的存在会自动占据一行。 inline-block 元素会占据一行而且可以调整宽高很适合将这些元素排列在一行，而且使用 inline-block 元素排列没有清除浮动这样的问题。 但是，使用 inline-block 布局两个元素之间会有一个空白间隙，下面一起来看一下。 html代码 <div class="container"> <div class="left"> left </div> <div class="right"> right </div> </div> css 代码 .container { width: 800px; height: 200px; /*font-size: 0;*/ } .left { /*font-size: 14px;*/ background-color: red; display: inline-block; width: 200px; height: 200px; } .right { /*font-size: 14px;*/ background-color: blue; display: inline-block; width: 600px; height: 200px; } 结果如下： 按道理说，container 的宽度正好等于 left 和 right 的宽度之和

CSS布局方式--inline-block 布局

由 与世无争的帅哥 提交于 2020-01-04 10:33:24
布局其实就是想办法怎样将一些元素横向的排列起来，纵向由于块级元素的存在会自动占据一行。 inline-block 元素会占据一行而且可以调整宽高很适合将这些元素排列在一行，而且使用 inline-block 元素排列没有清除浮动这样的问题。 但是，使用 inline-block 布局两个元素之间会有一个空白间隙，下面一起来看一下。 html代码 <div class="container"> <div class="left"> left </div> <div class="right"> right </div> </div> css 代码 .container { width: 800px; height: 200px; /*font-size: 0;*/ } .left { /*font-size: 14px;*/ background-color: red; display: inline-block; width: 200px; height: 200px; } .right { /*font-size: 14px;*/ background-color: blue; display: inline-block; width: 600px; height: 200px; } 结果如下： 按道理说，container 的宽度正好等于 left 和 right 的宽度之和

inline-block元素因基线对齐而造成上浮的问题

由 霸气de小男生 提交于 2019-12-31 23:40:07
　　 假设我需要实现将三个块级元素并排对齐的如下效果： 代码如下： 1 <!DOCTYPE html> 2 <html lang="en-US"> 3 <head> 4 <style> 5 .container { 6 display: inline-block; 7 margin: 15px; 8 padding: 5px; 9 width: 200px; 10 height: 200px; 11 border: 1px solid black; 12 } 13 </style> 14 </head> 15 16 <body> 17 18 <div style="margin: 200px;"> 19 <div class="container"> 20 <h2>Title</h2> 21 <p>One One One One</p> 22 </div> 23 24 <div class="container"> 25 <h2>Title</h2> 26 <p>Two Two Two Two</p> 27 </div> 28 29 <div class="container"> 30 <h2>Title</h2> 31 <p>Three Three Three Three</p> 32 </div> 33 </div> 34 35 </body> 36 </html> 　　 然而

inline-block元素出现位置错位的解决方法

由 时光毁灭记忆、已成空白 提交于 2019-12-31 23:39:57
如下代码所示： <div class="container"> 　　<div style="display: inline-block; height: 100px; width: 100px;"><img src="/myImg.jpg"></div> 　　<div style="display: inline-block; height: 100px; width: 100px;">Good Morning! Sir!</div>　　<div style="display: inline-block; height: 100px; width: 100px;"></div> </div> 容器container的子元素均为inline-block显示，而当子元素中存在图片或文字的时候，子元素的显示会显然不在水平线上，即有的元素会下沉，这一现象与行内元素的对齐有关，要解决该问题，可用vertical-align属性，如下： <div class="container"> 　　<div style="display: inline-block; height: 100px; width: 100px; vertical-align: middle;"><img src="/myImg.jpg"></div> 　　<div style="display: inline-block;

评分星星控件

由 有些话、适合烂在心里 提交于 2019-12-31 02:28:40
<head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> <style> /*大星星 start*/ .bigStarBox{ position:relative; display:inline-block; *display:inline; *zoom:1; float:left; width:100px; cursor:pointer; } .bigStarBox span{ cursor:pointer; display: inline-block; *display:inline; *zoom:1; width:18px; height:18px; background:url(http://images.cnblogs.com/cnblogs_com/ecalf/431722/o_start_big_2.gif) no-repeat -36px center; margin-right:2px; } .bigStarBox .selected{ background-position:left center; } .bigStarBox .halfStar{ background-position:-18px center; } .bigStarBox .valueLabel{

小程序上拉加载最多

由 ╄→尐↘猪︶ㄣ 提交于 2019-12-28 12:13:56
const app = getApp ( ) // pages/dingdan/dingdan.js Page ( { /** * 页面的初始数据 */ data : { // 初次加载的数组 page : 0 , usershiyonglist : [ ] , shiyong : false , } , /** * 生命周期函数--监听页面加载 */ onLoad : function ( options ) { var that = this ; that . onReachBottom ( ) ; } , /** * 生命周期函数--监听页面初次渲染完成 */ onReady : function ( ) { } , /** * 生命周期函数--监听页面显示 */ onShow : function ( ) { console . log ( '用户uid' , wx . getStorageSync ( 'uid' ) ) // 获取用户信息 console . log ( '保存用户信息到本地' , wx . getStorageSync ( 'userdata' ) ) } , /** * 生命周期函数--监听页面隐藏 */ onHide : function ( ) { } , /** * 生命周期函数--监听页面卸载 */ onUnload : function (

解决inline-block中间缝隙

由 耗尽温柔 提交于 2019-12-20 19:40:43
解决inline-block中间缝隙 本质：inline-block中间缝隙的本质是html中存在的空白字符（inline-block标签之间的回车符） 举例： li { display : inline-block ; background-color : red ; } < ul > < li > < a href = " # " > 登录 </ a > </ li > < li > < a href = " # " > 快速注册 </ a > </ li > < li > < a href = " # " > 关于 </ a > </ li > < li > < a href = " # " > 帮助 </ a > </ li > < li > < a href = " # " > APP下载 </ a > </ li > </ ul > 一、去除空白符 删除inline-block元素之间的换行符 < ul > < li > < a href = " # " > 登录 </ a > </ li > < li > < a href = " # " > 快速注册 </ a > </ li > < li > < a href = " # " > 关于 </ a > </ li > < li > < a href = " # " > 帮助 </ a > </ li > < li >

CSS的inline、block与inline-block

由 岁酱吖の 提交于 2019-12-20 00:00:31
基本知识点 行内元素一般是内容的容器，而块级元素一般是其他容器的容器，行内元素适合显示具体内容，而块级元素适合做布局。 块级元素(block)： 独占一行，对宽高的属性值生效；如果不给宽度，块级元素就默认为浏览器的宽度，即就是100%宽。 行内元素(inline)： 可以多个标签存在一行，对宽高属性值不生效，完全靠内容撑开宽高。 行内块元素(inline-block)： 结合的行内和块级的优点，既可以设置长宽，可以让padding和margin生效，又可以和其他行内元素并排。 其中 img和input为行内块元素 。 行内元素与块状元素之间的转换: float: 当把行内元素设置完float:left/right后，该行内元素的display属性会被赋予block值，且拥有浮动特性。行内元素去除了之间的莫名空白。 <head> <meta charset="UTF-8"> <title>测试</title> <style type="text/css"> p{ background-color: red; height: 500px; width: 30%; padding: 20px; margin: 20px; float: left;} div{ background-color: green; height: 50px; width: 40%; padding: 20px;

CSS display:inline-block大小不精准问题解决

由 不羁岁月 提交于 2019-12-15 05:02:53
搭建个人博客的时候，使用公安局备案网站复制下来的代码，发现内容大小无法自由控制的问题。 我的个人博客网站 出问题代码： < el-footer height = " 120px " > < div style =" width : 300px ; margin : 0 auto ; padding : 20px 0 ; background-color : red " > < p style =" height : 20px ; line-height : 20px ; margin : 0px 0px 0px 0px ; color : #939393 ; " > 京ICP备19055038号 </ p > </ div > < div style =" width : 300px ; margin : 0 auto ; padding : 20px 0 ; background-color : blue ; overflow：hidden ; " > < a target = " _blank " href = " rehttp://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11011502003885 " style =" display : inline-block ; text-decoration :
订阅 inline-block