色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

將ul中的方框放在中間，但向左對齊

CSS
江奕云2年前7瀏覽0評論

我找不到如何把盒子放在中間，而是靠左對齊。似乎ul的寬度不適合內容，并且不能自動設置，只能手動設置。但是我不想手動設置，因為我的內容是動態變化的。所以我需要盒子居中，但左對齊，沒有手動更改和腳本。

不居中但向左對齊:Not centered but aligned left

div {
  padding: 20px;
  width: 200px;
  background-color: green;
  text-align: center;
}

ul {
  list-style:none;
  padding: 0;
  margin: 0;
  text-align: left;
}

ul li {
  width: 40px;
  height: 40px;
  background-color: wheat;
  display: inline-block
}

<html>
<head></head>
<body>
<div>
   <ul>
   <li></li>
   <li></li>
   <li></li>
   <li></li>
   <li></li>
   <li></li>
   <li></li>
   <li></li>
   <li></li>
 </ul> 
</div>
</body>
</html>

CSS網格可以做到。調整div的大小以查看結果:

div {
  padding: 20px;
  width: 200px;
  border: 1px solid;
  overflow: hidden;
  resize: horizontal;
}

ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, 40px); /* width of elements here */
  grid-auto-rows: 40px; /* height here */
  grid-gap: 4px;
  justify-content: center; /* this will do the magic */
}

ul li {
  background-color: wheat;
}

<div>
  <ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</div>