如圖所示:

display: inline

1 <div class="text1">文字一</div>
2 <div class="text2">文字二</div>

1 .text1,.text2{
2 display: inline;
3 }

display: inline-block

1 <div class="content1"></div>
2 <div class="content2"></div>

 1 .content1,.content2{
 2 width: 200px;
 3 height: 200px;
 4 display: inline-block;
 5 }
 6 .content1{
 7 background-color: #008B8B;
 8 }
 9 .content2{
10 background-color: #A0522D;
11 }

用display:inline-block可以讓元素在一行顯示但是它會受空格換行鍵的影響會產(chǎn)生默認(rèn)的間距;

1 <div class="wrap">
2 <div class="box1">文字內(nèi)容一</div>
3 <div class="box2">文字內(nèi)容二</div>
4 </div>

 1 .wrap{
 2 font-size: 0;
 3 display: inline;
 4 }
 5 .box1,.box2{
 6 width: 200px;
 7 height: 200px;
 8 display: inline-block;
 9 *display: inline;/*css hack ie瀏覽器可識別*/
10 *zoom:1;/*觸發(fā)css hack的layout*/
11 font-size: 16px;
12 }

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

總結(jié)讓多個(gè)元素在一行顯示面試題
1.用 display: inline把元素傳化為行內(nèi)元素但是設(shè)置寬高屬性不起作用;
2.用display:inline-block可以讓元素在一行顯示但是它會受空格換行鍵的影響會產(chǎn)生默認(rèn)的間距;
解決辦法:
1.去掉空格和換行鍵的影響讓標(biāo)簽全都在一行(這種方法不推薦閱讀性差)
2.給加了display: inline- block屬性的元素的父元素加一個(gè)屬性font-size:0(但是我們會發(fā)現(xiàn)一個(gè)問題:元素里面如果有文字文字消失=解決:我們只需要在元素身上加一個(gè) font-size把父元素font-size:0;覆蓋)(最解決方法)

1 <div class="main">
2 <div class="left"></div>
3 <div class="right"></div>
4 </div>

 1 .left,.right{
 2 width: 200px;
 3 height: 200px;
 4 float: left;
 5 }
 6 .left{
 7 background-color: #FF0000
 8 }
 9 .right{
10 background-color: greenyellow
11 }
12 .main{
13 overflow: hidden;
14 }

3.利用float:left/right,但是我們需要清除浮動,父集加下overflow:hidden

關(guān)于"display:inline-block兼容ie6/7的寫法"補(bǔ)充網(wǎng)址https://blog.csdn.net/ac601458466/article/details/48850669

IE7下塊元素如何兼容 display:inline-block寫法？實(shí)際有效的方法共有2種：方法1：直接讓塊元素設(shè)置為內(nèi)聯(lián)對象呈遞（設(shè)置屬性 display:inline），然后觸發(fā)塊元素的 layout（如：zoom:1等）。兼容各瀏覽器的代碼如下： div {display:inline-block;*display:inline; *zoom:1;…}解釋：dispaly:inline-block照顧的是ie8+的瀏覽器，這是正常的設(shè)置，在低版本的ie下設(shè)置行內(nèi)塊有2個(gè)條件，一個(gè)是行內(nèi)，一個(gè)是設(shè)置寬高，觸發(fā)layout即可設(shè)置寬高，而div設(shè)置了寬高后還是會換行，layout不是為水平而設(shè)置的，所以為塊級元素轉(zhuǎn)行內(nèi)塊加上了*display：inline屬性，但是display：inline不會觸發(fā)layout，于是加上zoom：1重新觸發(fā)layout，于是就形成了一個(gè)可以“設(shè)置寬高的行內(nèi)元素”