Question

我试图在div内水平对齐一行div。当容器div收缩时，内部div（实际上是div中的图像）将紧挨着彼此。我创造了一个小提琴，我遇到的问题是，当div缩小时，内部div不会靠近。我已经尝试过使用％＆和其他许多方法来解决这个问题，但我很擅长使用％＆作为px。在我的例子中，容器div是流体但红色内部div不是！我如何使内部div流畅？这里是 fiddle

代码：

    <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;
}

Demo

在div中对齐流体列表

2 个答案: