我在 div 中有一个有序列表。 li 元素从 div 底部溢出;但是,我希望它们换行到右侧的另一列中。
希望这能解释我所拥有的与我想要的:
我的 HTML 和 CSS 看起来像:
.some-div
{
background-color: #FEEBCC;
padding: 5px;
}
.some-div p
{
width: 35%;
display: block;
float: left;
}
.some-div ul
{
list-style: disc;
color: #5C2946;
width: 60%;
display: block;
float: right;
height: 50px;
}
<div class="some-div">
<h3>Learn How to Fund It</h3>
<p>You can use the following assets to fund a charitable gift annuity:</p>
<ul>
<li>
<a class="flyover-link" rel="#cashcga-flyover">Cash</a>
</li>
<li>
<a class="flyover-link" rel="#appreciatedsecuritiescga-flyover">Appreciated Securities</a>
</li>
<li>
<a class="flyover-link" rel="#closelyheldstockcga-flyover">Closely Held Stock</a>
</li>
<li>
<a class="flyover-link" rel="#realestatecga-flyover">Real Estate</a>
</li>
<li>
<a class="flyover-link" rel="#tangiblepersonalpropertycga-flyover">Tangible Personal Property </a>
</li>
</ul>
</div>
我无法更改该标签结构,因为我正在使用内容管理系统。
奖励点:为什么背景颜色没有应用到整个 div????
最佳答案
这是因为某些 html 元素
确实有它们的默认 值
,因此您需要将它们设置为 0
。所以我建议您将以下 css hack 添加到您的代码中,这会使 html 元素的默认值无效。
*{
margin: 0;
padding: 0;
}
注意:您的 ul
已经包裹在您的 div
中。
关于html - 如何使无序列表元素环绕到另一列中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26104326/