Question

我在div中有一个有序列表。 li元素溢出div的底部;但是，我希望它们包装在右边的另一列中。

希望这能解释我所拥有的与我想要的一切：

enter image description here

我的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 elements确实有默认values，因此您需要将它们0。所以我建议你只需将以下css hack添加到你的代码中，这会使html元素的默认值无效。

*{
    margin: 0;
    padding: 0;    
}

注意：ul已将div包裹起来。

<强> WORKING FIDDLE

Answer 2

li元素被硬编码到您的列表中。要将它们放入div中，您可以将它们硬编码到首选div中，或使用javascript动态更改html代码。将短列表编码到相邻的div中可能会更容易，但如果这是以某种方式生成的列表，则css可以更改事物的显示方式，但是您的项目的位置仍然是父项的一部分DIV。 Css用于在屏幕上进行样式设置和放置，而不是用于更改父元素。

如何使无序列表元素包含在另一列中

2 个答案: