Html 在div中对齐流体列表_Html_Css_Vertical Alignment_Fluid Layout

Html 在div中对齐流体列表

html css

Html 在div中对齐流体列表,html,css,vertical-alignment,fluid-layout,Html,Css,Vertical Alignment,Fluid Layout,我正在尝试在一个div中水平对齐一行div。当容器div收缩时，内部div（实际上是div中的图像）将彼此相邻地推送。我已经创建了一个小提琴，我的问题是，当div缩小时，内部div不会移动得更近。我已经尝试过使用%'和许多其他方法来解决这个问题，但我对使用%'作为px的替代品还很陌生。在我的示例中，容器div是流体，但红色的内部div不是！如何使内部divs成为流体？这是你的电话号码以及守则： <html> <head> <title>Ali

我正在尝试在一个div中水平对齐一行div。当容器div收缩时，内部div（实际上是div中的图像）将彼此相邻地推送。我已经创建了一个小提琴，我的问题是，当div缩小时，内部div不会移动得更近。我已经尝试过使用%'和许多其他方法来解决这个问题，但我对使用%'作为px的替代品还很陌生。在我的示例中，容器div是流体，但红色的内部div不是！如何使内部divs成为流体？这是你的电话号码

以及守则：

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


对齐
.container{位置：相对；边距：0px自动；边框：1px纯黑色；宽度：100%；最大宽度：500px；}
li{显示：内联块；左边距：25px；}
ul，li{列表样式：无；}
.box{宽度：100px；高度：100px；边框：1px实心红色；}





当container div的右侧碰到红色的框时，我希望这些框相互向左推，直到它们分开
到达集装箱舱的左侧。

尝试以%为元素指定宽度。例如：尝试将以下代码添加到样式表中

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

试试这个：

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

完美！这正是我想做的！你花了大约2分钟，我花了大约2个小时，仍然不得不使用堆栈溢出！我认为我已经把css学习到了可以接受的水平。现在的问题是，我必须学习响应式设计。。。。。非常感谢您的时间和帮助：）干杯，伙计……）很好的帮助@Oriol，很好的解决方案，我将从这段代码中学习。非常感谢您的帮助：）