【CSS】Width fix the list text

問題背景

<li>在不指定寬度的情況下,會自動填滿整行。
如果把border叫出來,就會很明顯。
例如:

  • 填滿整行的li
  • 填滿整行的li

可以佐以排版技巧來解決這個問題。

橫向排列:inblock

橫向排列只要指定display就可以解決問題

ul
 li 橫向排列不填滿
 li 橫向排列不填滿
 li 橫向排列不填滿
li
 border: 1px solid #000
 display: inline

Display

  • 橫向排列不填滿
  • 橫向排列不填滿
  • 橫向排列不填滿

縱向排列:float

使用float完成縱向排列

ul
 li 縱向排列不填滿
 li 縱向排列不填滿
 li 縱向排列不填滿
ul
 float: left

li
 border: 1px solid #000

Display

  • 縱向排列不填滿
  • 縱向排列不填滿
  • 縱向排列不填滿

 

注意:周邊元素必須指定clear

如果不指定clear的話,會變成這樣↓↓

  • 縱向排列不填滿
  • 縱向排列不填滿
  • 縱向排列不填滿

這段文字想要放在清單下方,但是跑到左邊來了QQ

 

 


解決法:周邊的元素指定clear。

ul 
 li 縱向排列不填滿 
 li 縱向排列不填滿 
 li 縱向排列不填滿 

p 這段文字想要放在清單下方,成功。
ul
 float: left
li
 border: 1px solid #000

p 
 clear: both 
 //該元素的左邊(left)、右邊(right)、兩邊(both)都不可以有任何東西,若有的話,該元素會自動往下移。

Display

  • 縱向排列不填滿
  • 縱向排列不填滿
  • 縱向排列不填滿
這段文字想要放在清單下方,成功

Leave a Reply

Your email address will not be published. Required fields are marked *