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