如圖所示:

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可以讓元素在一行顯示但是它會受空格換行鍵的影響會產生預設的間距;

1 <div class="wrap">
2 <div class="box1">文字內容一</div>
3 <div class="box2">文字內容二</
 
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;/*觸發css hack的layout*/
11 font-size: 16px;
12 }

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;覆蓋)(最解決方法)

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

關於"display:inline-block相容ie6/7的寫法"補充網址https://blog.csdn.net/ac601458466/article/details/48850669

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，於是就形成了一個可以“設定寬高的行內元素”