如何使無序列表元素環繞到另一列

我有一個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？

來源

2014-09-29 user4055428

這是因爲有些html elements確實有他們的默認values所以你需要使他們0。所以我建議你只添加下面的CSS黑客到你的代碼，這使html元素的默認值無效。

*{ 
    margin: 0; 
    padding: 0;  
}

注意：您ul已經包裹在你的div。

WORKING FIDDLE

來源

2014-09-29 16:24:50 Benjamin

鋰元素被硬編碼到你的列表中。要將它們放入div，您可以將它們硬編碼到首選div中，或使用javascript動態更改html代碼。將短列表編碼到相鄰的div中可能會更容易，但如果這是一個以某種方式生成的列表，css可以更改事件的顯示方式，但是li項目的位置仍然是父項的一部分DIV。 Css用於設計樣式並放置在屏幕上，不用於更改父元素。

來源

2014-09-29 16:31:22 Ethan

如何使無序列表元素環繞到另一列

回答

相關問題