gpt4 book ai didi

css - li 元素获得双倍边距,ul 元素无法正确调整大小

转载 作者:太空宇宙 更新时间:2023-11-04 12:39:45 25 4
gpt4 key购买 nike

这个问题是双重打击,本质上,我有这个设置:

<section>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
<div></div>
<div></div>
</section>

这是样式表:

ul{
width: 100%;
margin: -5px 0;
padding: 0;
background-color: tomato;
}

li{
width: 200px;
height: 100px;
margin: 5px;
background-color: yellowgreen;
float: left;
list-style: none;
}

ul:after{
content: " ";
height: 0;
display: block;
clear: both;
}

div{
width: 100%;
height: 100px;
margin: 5px;
background-color: cornflowerblue;
}

fiddle :http://jsfiddle.net/p299jd55/2/

问题是我想让列表项假装成 <ul>不在那里。我目前使用的版本适用于垂直,但不适用于水平。此外,<ul>比 div 小一点,因此列表元素不会与 div 正确对齐,即使它们通常会对齐。我希望列表元素像其他 div 一样显示(较小的除外)。问题是我需要将它们保存在 <ul> 中元素,以便我的 VM 绑定(bind)库 (KnockoutJS) 正常工作。

有没有办法在不为 div 引入包装器的情况下解决这个问题?我想将仅用于破解 CSS 的元素数量降至最低。如果不包装 div 就无法做到这一点,我可以接受,但我宁愿它是最后的选择。

最佳答案

非常简单:

CSS 更改

ul{
width: 100%;
margin: 0 0; /* Changed */
padding: 0;
background-color: tomato;
}

div{
width: 100%;
height: 100px;
margin: 5px 0; /* Changed */
background-color: cornflowerblue;
}

Fiddle illustrating the change

这是怎么回事,您的利润到处都是。当您要在 li 中简单地覆盖它们时,无需在 ul 上设置负边距。这就是导致您的布局不稳定的原因。

更新

根据您在评论中的反馈,以下是将 div 部分刷新到您的 ul

的方法

Fiddle with flush div section

基本上,我们使用您的 clearfix 解决方案通过将此行添加到 ul:after 来向上拉动以下元素:

margin-bottom: -10px;

然后添加这条规则:

li:first-child {
margin-left: 0;
}

希望对您有所帮助。

更新部分deux

根据您的评论

这非常简单。

只需将 float 添加到您的 li 元素和 div 元素中。删除 clearfix 部分。

Example fiddle

关于css - li 元素获得双倍边距,ul 元素无法正确调整大小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26983426/

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