在div中對齊流體列表

Question

我試圖在div內水平對齊一行div。 當容器div收縮時，內部div（實際上是div中的圖像）將緊挨着彼此。 我創造了一個小提琴，我遇到的問題是，當div縮小時，內部div不會靠近。 我已經嘗試使用％和其他許多方法來解決這個問題，但我很擅長與％的同時使用px。 在我的例子中，容器div是流體但紅色內部div不是！ 我如何使內部div流暢？ 這是小提琴

和代碼：

    <html>

<head>
  <title>Alignment</title>

  <style type="text/css">
      .container{position: relative; margin: 0px auto; border: 1px solid black; width: 100%; max-width: 500px;}
       li{display: inline-block; margin-left: 25px;}
       ul,li{list-style: none;}
      .box{width: 100px; height: 100px; border: 1px solid red;}
  </style>
</head>

<body>

<div class="container">
  <ul>
    <li><div class="box"></div></li>
    <li><div class="box"></div></li>
    <li><div class="box"></div></li>
    <div style="clear: both"></div>
  </ul>
</div>

<p>When the right side of the container div hits the red box I want the boxes to be pushed left against each other until they
reach the left side of the container div.</p> 

</body>
</html>

Answer 1

嘗試以％表示元素的寬度。 例如：嘗試將以下代碼添加到樣式表中

li{
   display: inline-block; 
   margin-left: 5%; 
   width:25%;
}
.box{
   width: 100%;
   height: 100px; 
   border: 1px solid red;
}

Answer 2

嘗試這個：

.container{
    text-align: center;
}
ul,li{
    padding: 0;
}
li{
    display: inline-block;
    margin-left: 25px;
}
li:first-child{
    margin-left: 0;
}

演示

在div中對齊流體列表

問題描述

2 個解決方案

解決方案1
1 已采納 2014-03-16 19:03:03

解決方案2
1 2014-03-16 19:05:34

在div中對齊流體列表

問題描述

2 個解決方案

解決方案1 1 已采納 2014-03-16 19:03:03

解決方案2 1 2014-03-16 19:05:34

解決方案1
1 已采納 2014-03-16 19:03:03

解決方案2
1 2014-03-16 19:05:34