首頁(yè) 猿問 CSS里 ul標(biāo)簽怎么居中啊

CSS里 ul標(biāo)簽怎么居中啊

CSS3

狐的傳說 2019-03-14 14:10:18

首先是一個(gè) div塊里面包一個(gè)ul<div><ul><li></li><li></li></ul></div>CSS里設(shè)定如下*{padding:0;margin:0;}li{list-style-type:none;}div{height:300px;width:300px;}ul{width:200px;height:200px;}li{height:50px;width:50px;}我是通過給各自加背景顏色來看的問題1：ul是區(qū)塊嗎？我已經(jīng)給他定義了高和寬但我給他家margin:0 auto; 他的位置從原來貼近左端，向右移了一點(diǎn)，但是并沒有真正的左右居中？？？這是怎么回事？問題2：怎么讓ul這一塊200*200的區(qū)塊在div中上下居中？？如果用padding的話等于改變了ul的大小了吧？？？只能用margin嗎？？？還是有其他方法的？問題3：li在ul中同樣定義了長(zhǎng) 寬之后 margin:0 auto; 無法左右居中。。。這個(gè)不是對(duì)區(qū)塊都通用的么？？怎么ul 和li都沒用了？？？問題4：一樣是上下居中問題 li我定好是50*50的。。怎么不改變大小的情況下讓li這個(gè)塊在 ul里上下居中呢？？？padding一樣會(huì)改變大小吧？又只能用margin嗎？以前有人說line-height。。這個(gè)的話加上去只是讓 li里的內(nèi)容在li里居中吧？而不是我要的li在 ul里居中吧？？我語(yǔ)言不好網(wǎng)頁(yè)制作剛學(xué)。。上面寫的可能有點(diǎn)啰嗦。。。4個(gè)問題（不是單純的問ul怎么居中，li怎么居中額，那樣的話我用padding之類的，任意去改變大小也可以達(dá)到效果，請(qǐng)看看上面我的情況，謝謝了。）希望能回答一下。。非常感謝了

查看完整描述

3 回答

慕尼黑的夜晚無繁華

TA貢獻(xiàn)1864條經(jīng)驗(yàn) 獲得超6個(gè)贊

ul被定了成塊元素，即display:block ，它就注定居不了中，所以只要不要變成塊元素就可以了，然后用text-align:center居中就可以了。很多的導(dǎo)航條都是沒居中的。

1 反對(duì) 回復(fù) 2019-03-18

千萬(wàn)里不及你

TA貢獻(xiàn)1784條經(jīng)驗(yàn) 獲得超9個(gè)贊

要實(shí)現(xiàn)UL標(biāo)簽水平居中，關(guān)鍵在于CSS中 display:inline 的運(yùn)用。

HTML代碼具體示例：

<ul>

</ul>

</div>

注意：如果UL沒有設(shè)置寬度，用margin:0 autl是沒有用的，因?yàn)樗J(rèn)了100%，給它一個(gè)寬度，實(shí)際寬度或者width:auto都可以。

擴(kuò)展資料：

在HTML中，有兩種類型的列表：無序列表 - 列表項(xiàng)標(biāo)記用特殊圖形（如小黑點(diǎn)、小方框等）；有序列表 - 列表項(xiàng)的標(biāo)記有數(shù)字或字母。使用CSS，可以列出進(jìn)一步的樣式，并可用圖像作列表項(xiàng)標(biāo)記。

用CSS設(shè)置UL標(biāo)簽的列表符號(hào)是不需要去設(shè)置的，因?yàn)閡l默認(rèn)就是標(biāo)簽符號(hào)的，如果使用了這個(gè)list-style：none；去掉了這個(gè)屬性，然后又想有的話，就給這個(gè)ul一個(gè)id或者是class，然后在css中l(wèi)ist-style-type：disc !important，這樣就又有序號(hào)了。

反對(duì) 回復(fù) 2019-03-18