鍍金池/ 問答/HTML/ 這里給ul 設(shè)置margin-left：-20px，就能使li元素跑上來，為什么

這里給ul 設(shè)置margin-left：-20px，就能使li元素跑上來，為什么？

代碼http://js.jirengu.com/jokub/1...

clipboard.png
本來想給ul 加個border看看為什么的，可是發(fā)現(xiàn)li都浮動了，根本看不出ul的border 在哪兒

回答
編輯回答
尤禮

  1. 給ul加上清除浮動的樣式不就看出來了。

  2. 加上margin-left:-20px之后，由于默認width是auto,要占滿父元素寬度，所以width補償了20px,變寬了。

你要知道塊級元素的width的默認值不是100%，而是auto，就是所有橫向樣式如margin、width、padding等加在一起是100%，所以margin減小了20px，width是auto就會變大20px。

2017年3月15日 06:27
編輯回答
陌璃

640-(200+20)*3=-20 少了20px
所以margn-left:-20;就多出來20正好夠

2017年10月9日 04:31
編輯回答
不二心

你算一下就可以了，你的容器是640px，每個li是200px，你如果想放下3個li元素至少需要200X3+3*20 = 660px的容器才可以，因為你設(shè)置li的margin-left為20px了，當(dāng)你把ul的margin-left設(shè)置成-20px，實際上整個容器向左偏移了-20px，660-20 = 640px正好是你的容器寬度

2017年5月2日 19:30