我已经包含了一个示例代码,其中发生在下面的代码片段中(查看 .list-id):
问题:宽度设置为 220px 而实际上是 71.391px
.featured-products-container {
display: flex;
}
.list {
display: flex;
flex-direction: row;
margin: 0;
padding: 0;
height: 400px;
width: 400px !important;
list-style-type: none;
overflow: auto;
white-space: nowrap;
width: max-content;
}
.list-id {
height: 100%;
width: 220px;
padding: 30px 0 0 30px;
box-sizing: border-box;
}
.list-title {
margin: 0;
}
.list-description {
text-wrap: wrap;
}
.featured-products {
height: 100%;
display: flex;
flex-direction: row;
align-items: center;
margin: 0;
padding: 0;
list-style-type: none;
}
.product {
width: 200px;
height: 200px;
background-color: blue;
}
<ul class="list">
<li class="list-id">
<h3 class="list-title">Products</h3>
<p class="list-description">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</li>
<ul class="featured-products">
<li class="product">
</li>
<li class="product">
</li>
<li class="product">
</li>
</ul>
</ul>
问题是你的父母
ul.list
有display: flex
。设置此值后,指定的宽度将被忽略。您可以使用 flex-basis
或将子级移动到 div
中并将它们设置为 inline
元素,这应该将它们排成一行。