gpt4 book ai didi

html - 在 div 内对齐流体列表

转载 作者:太空宇宙 更新时间:2023-11-04 03:58:37 26 4
gpt4 key购买 nike

我试图在一个 div 中流畅地水平对齐一行 div。当容器 div 收缩时,内部 div(实际上是 div 中的图像)将彼此相邻。我创建了一个 fiddle ,我遇到的问题是当 div 缩小时内部 div 不会靠近。我尝试过使用 %'s 和许多其他方法来解决这个问题,但我对使用 %'s 作为 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>

最佳答案

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

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

关于html - 在 div 内对齐流体列表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22441307/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com