自我评价:走在路上的菜鸟,想着CMS|WEB|SEO,做着可以成为牛掰程序seoer的梦!

当前位置:博客 > 前端开发 > HTML|CSS代码 >

让多个元素在一行显示的方法和技巧(面试题)

作者:灰牛站长•发布时间:2021-07-12 10:50:59•浏览

如图所示:

display: inline
<div class="text1">文字一</div>
<div class="text2">文字二</div>
.text1,.text2{
display: inline;
}
display: inline-block
<div class="content1"></div>
<div class="content2"></div>
.content1,.content2{
width: 200px;
height: 200px;
display: inline-block;
}
.content1{
background-color: #008B8B;
}
.content2{
background-color: #A0522D;
}

用display:inline-block可以让元素在一行显示但是它会受空格换行键的影响会产生默认的间距;

<div class="wrap">
<div class="box1">文字内容一</div>
<div class="box2">文字内容二</div>
</div>
.wrap{
font-size: 0;
display: inline;
}
.box1,.box2{
width: 200px;
height: 200px;
display: inline-block;
*display: inline;/*css hack ie浏览器可识别*/
*zoom:1;/*触发css hack的layout*/
font-size: 16px;
}

display: inline-block;在IE6,IE7下不兼容的解决办法(css hack 兼容) =>*display: inline; =>*zoom:1;

总结让多个元素在一行显示面试题

1.用 display: inline把元素传化为行内元素但是设置宽高属性不起作用;

2.用display:inline-block可以让元素在一行显示但是它会受空格换行键的影响会产生默认的间距;

解决办法:

1.去掉空格和换行键的影响让标签全都在一行(这种方法不推荐阅读性差)

2.给加了display: inline- block属性的元素的父元素加一个属性font-size:0(但是我们会发现一个问题:元素里面如果有文字文字消失=解决:我们只需要在元素身上加一个 font-size把父元素font-size:0;覆盖)(最解决方法)

<div class="main">
<div class="left"></div>
<div class="right"></div>
</div>
.left,.right{
width: 200px;
height: 200px;
float: left;
}
.left{
background-color: #FF0000
}
.right{
background-color: greenyellow
}
.main{
overflow: hidden;
}
3.利用float:left/right,但是我们需要清除浮动,父集加下overflow:hidden

文章参考:display:inline-block兼容ie6/7的写法

IE7下块元素如何兼容 display:inline-block写法?实际有效的方法共有2种:方法1:直接让块元素设置为内联对象呈递(设置属性 display:inline),然后触发块元素的 layout(如:zoom:1等)。兼容各浏览器的代码如下: div {display:inline-block;*display:inline; *zoom:1;…}解释:dispaly:inline-block照顾的是ie8+的浏览器,这是正常的设置,在低版本的ie下设置行内块有2个条件,一个是行内,一个是设置宽高,触发layout即可设置宽高,而div设置了宽高后还是会换行,layout不是为水平而设置的,所以为块级元素转行内块加上了*display:inline属性,但是display:inline不会触发layout,于是加上zoom:1重新触发layout,于是就形成了一个可以“设置宽高的行内元素”

相关文章

  • 代码技巧之常用快捷键的整理

    代码技巧之常用快捷键的整理

    常用快捷键的整理 ctr1+C复制 ctr1+V粘贴 ctrl+Z撤销 回到上一步操作 ctr1+D复制整行 ctr1+Z剪切整行 增加/删除单行注释ctrl+/ 增加/删除多行注释ctrl+shift+/ html注释...
    2021-07-12 11.07.53
  • z-index的特点

    z-index的特点

    思路: ➥z-index的结构/定位元素默认的z-index ➥z-index单位 ➥能不能用子元素和父元素比较 ➥父元素没有z-index,能不能通过子元素控制他们的层级=改变层级...
    2021-07-12 11.07.57
  • 定位元素的异同点

    定位元素的异同点

    定位的值 position: absolute绝对定位 position: relative相对定位 position: fixed固定定位 定位的相同点和不同点 ===相同点: 可以 设置top/ bottom/ left/right四个方位值,如...
    2021-07-12 11.07.09
  • 定位之固定定位

    定位之固定定位

    固定定位- position: fixed 脱离文档流; 参照物是浏览器的可视窗口;任何元素都可以设置固定定位; 可设置top/ bot tom/left/ right四个方位 可通过z-index改变层级 !...
    2021-07-12 11.07.38
  • 定位之绝对定位

    定位之绝对定位

    定位元素元素层级元素定位滚动条 绝对定位- position: absolute;特点 脱离文档流 可以设置参照物,参照物必须是其父级元素(直系父级),如果直接父级没有会一直...
    2021-07-12 11.07.13

手机端