我如何划分我的<ul>的内容？
我想要将内容均匀地排列出来，然后所有的空格都有相同的数量，但我不知道该如何做。当我将填充添加到列表或增加列中的空格时，它会破坏页面的格式。
我还让tride在行中放置了一个偏移量，但是它仍然没有修复它，所以我正在尝试这样做：
Projects About Me Contact Me
Pic Pic Pic但每当我把它改变为：
Projects Pic About Me Contact Me
Pic Pic
.header {
font-family: Cambria;
font-size: xx-large;
text-align: center;
padding: 50px;
background-color: lightblue;
background-image: linear-gradient(to bottom right, darkgray, lightblue);
}
.home {
width: 100%;
}
.home div {
width: 200px;
}
.home img {
vertical-align: middle;
border-style: none;
height: 200px;
width: 200px;
object-fit: cover;
}
.home ul {
display: inline-block;
list-style-type: none;
overflow: hidden;
}
.home li {
margin-left: 20px;
list-style: none;
float: left;
}
.home a {
text-decoration: none;
font-family: Cambria;
font-weight: lighter;
color: steelblue;
}
.home a:hover {
font-weight: bold;
color: darkblue;
}
.home img:hover {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}<body style="background-color:mintcream">
<div class="header">
<span style="color:darkblue">const</span>
<span style="color:white">_name =</span>
<span style="color:darkblue">"My_Name"</span>
</div>
<div class="row">
<ul class="home" style="padding-top:20px;">
<li class="col-md-3">
<a href="#">
<span style="font-size:35px">Projects</span>
<span><img src="https://via.placeholder.com/300.png/09f/fff"/
</span>
</a>
</li>
<li class="col-md-3">
<a href="#">
<span style="font-size:35px">About Me</span>
<div><img src="https://via.placeholder.com/300.png/09f/fff" /></div>
</a>
</li>
<li class="col-md-2">
<a href="#">
<span style="font-size:35px">Contact Me</span>
<div><img src="https://via.placeholder.com/300.png/09f/fff" /></div>
</a>
</li>
</ul>
</div>
</body>
回答 3
Stack Overflow用户
发布于 2019-01-20 18:21:21
正如@apanesar11 11所指出的，网格应该可以解决您的问题。另一种解决方案是使用柔性箱。我用@mplungjan：https://codepen.io/mdubus/pen/BvXXmJ给出的片段作为例子
.home {
width: 100%;
display:flex;
flex-direction:row;
justify-content:space-around;
}如果您对对齐不满意，也可以将.home中的.home替换为justify-content:space-between;。我不确定你想要什么样的对齐，但希望它能帮上忙！:)
编辑:我还更改了.home a和
display:flex; flex-direction:column;，这样你的图片就在你的文字下面了。
Stack Overflow用户
发布于 2019-01-20 18:16:51
你用过网格系统吗？它将使一切变得更容易做，你的网页更有反应。查看下面的一些示例代码：https://github.com/apanesar11/CSS-Grids
Stack Overflow用户
发布于 2019-01-20 18:30:45
当前出现这种行为的原因是span是内联元素，而div是块元素。正因为如此，about.png和phone.jpg映像被定位在当前位置，因为它们被包装在div元素中，因此启动一个新的。您的project.jpg img封装在span元素中，而span元素不从新行开始，它们只占用所需的空间。
https://stackoverflow.com/questions/54279367
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号