css - div display: inline-block; 置中？
問(wèn)題描述
.layout{ width: 760px; margin: 150px auto 0 auto;}.layout2{ width: 250px; display: inline-block;}
<p class='layout'> <p class='layout2'> 1 </p> <p class='layout2'> 2 </p> <p class='layout2'> 3 </p></p>
請(qǐng)問(wèn)如何讓layout2 p能夠置中對(duì)齊呀？另外若是layout改成750寬 layout2設(shè)250寬第三個(gè)p會(huì)跑到下面去....
問(wèn)題解答
回答1：
代碼貼上：
<!DOCTYPE html><html><head> <title></title> <style type='text/css'> .layout{ width: 750px; margin: 150px auto 0 auto; background: #cccccc; font-size: 0;}.layout2{ width: 250px; display: inline-block; *display: inline;; *zoom:1; font-size: 20px; background: #666666; text-align: center;} </style></head><body><p class='layout'> <p class='layout2'> 1 </p> <p > 2 </p> <p class='layout2'> 3 </p></p></body></html>
如上 設(shè)置父元素font-size:0前提是你必須設(shè)置 子元素 也就是inline-block的font-size 設(shè)置好字體 要不然 就什么都不會(huì)顯示
參考文獻(xiàn)：http://sentsin.com/web/23.html
回答2：有空格，父元素中設(shè)置font-size:0
回答3：inline-block有間距，需要去掉參見(jiàn)這篇文章http://www.zhangxinxu.com/wor...
layout2居中對(duì)齊是什么意思？
回答4：補(bǔ)充一點(diǎn)吧。其實(shí)不用設(shè)置font-size:0；
<p style='background: red;'>1</p><p style='background: yellow;'>2</p><p style='background: green;'>3</p>
可以這麼寫。inline-block元素標(biāo)籤間的空格導(dǎo)致的inline-block之間存在間隙。
<p class='layout2'> 1 </p><!-- --><p class='layout2'> 2 </p><!-- --><p class='layout2'> 3 </p>
或者這麼寫，用註釋填充你的格式。
這樣就不需要添加額外樣式了，畢竟代碼上線的時(shí)候註釋是會(huì)被壓縮掉的。
回答5：其實(shí)一個(gè)浮動(dòng)就可以解決
.layout {width: 750px;margin: 0 auto;margin-top: 150px;background-color: red; } .layout2 {width: 250px;background-color: blue;float: left;text-align: center; }回答6：
空格也是字符。在inline-block的父元素上設(shè)置font-size:0;即可消除。
相關(guān)文章：
1. debian - docker依賴的aufs-tools源碼哪里可以找到啊？2. 為什么我ping不通我的docker容器呢？？？3. vim - docker中新的ubuntu12.04鏡像,運(yùn)行vi提示,找不到命名.4. docker網(wǎng)絡(luò)端口映射，沒(méi)有方便點(diǎn)的操作方法么？5. docker-compose 為何找不到配置文件？6. mac連接阿里云docker集群，已經(jīng)卡了2天了，求問(wèn)？7. docker安裝后出現(xiàn)Cannot connect to the Docker daemon.8. golang - 用IDE看docker源碼時(shí)的小問(wèn)題9. docker images顯示的鏡像過(guò)多，狗眼被亮瞎了，怎么辦？10. Android和JS的交互問(wèn)題
網(wǎng)公網(wǎng)安備