html - 如何使无序列表元素环绕到另一列中

Question

我在 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？？？？

Answer 1

这是因为某些 html 元素 确实有它们的默认 值，因此您需要将它们设置为 0。所以我建议您将以下 css hack 添加到您的代码中，这会使 html 元素的默认值无效。

*{
    margin: 0;
    padding: 0;    
}

注意:您的 ul 已经包裹在您的 div 中。

WORKING FIDDLE