Question

我在动态驱动器中使用ddlevelsmenu.js来显示鼠标悬停时的菜单项。一切正常。只是我有一个非常长的列表，看起来有点奇怪。我可以将列表项拆分成不同的列吗？下面是我的HTML代码，后跟CSS代码：

<ul>
<li><a href="#" rel="stts">Indian States</a></li>
</ul>

上述代码将在鼠标悬停时触发以下列表项

 <ul id="stts" class="submenustyle">
  <li><a href="../../staates/ap/l">Andhra Pradesh</a></li>
  <li><a href="../../staates/arp/l">Arunachal Pradesh</a></li>
  <li><a href="../../staates/asm/l">Assam</a></li>
  <li><a href="../../staates/bih/l">Bihar</a></li>
  <li><a href="../../staates/chsg/l">Chattisgarh</a></li>
  <li><a href="../../staates/goa/l">Goa</a></li>
  <li><a href="../../staates/guj/l">Gujarat</a></li>
  <li><a href="../../staates/har/l">Haryana</a></li>
  <li><a href="../../staates/hp/l">Himachal pradesh</a></li>
  <li><a href="../../staates/jk/l">Jammu Kashmir</a></li>
  <li><a href="../../staates/jh/l">Jharkhand</a></li>
  <li><a href="../../staates/ka/l">Karnataka</a></li>
   <li><a href="../../staates/ke/l">Kerala</a></li>
   <li><a href="../../staates/mp/l">Madhya Pradesh</a></li>
   <li><a href="../../staates/mah/l">Maharashtra</a></li>
   <li><a href="../../staates/man/l">Manipur</a></li>
    <li><a href="../../staates/meg/l">Meghalaya</a></li>
    <li><a href="../../staates/miz/l">Mizoram</a></li>
    <li><a href="../../staates/nag/l">Nagaland</a></li>
    <li><a href="../../staates/odi/l">Odisha</a></li>
    <li><a href="../../staates/pun/l">Punjab</a></li>
    <li><a href="../../staates/raj/l">Rajasthan</a></li>
    <li><a href="../../staates/sri/l">Srinagar</a></li>
    <li><a href="../../staates/sik/l">Sikkim</a></li>
    <li><a href="../../staates/tn/l">Tamil Nadu</a></li>
    <li><a href="../../staates/tel/l">Telangana</a></li>
    <li><a href="../../staates/up/l">Uttar Pradesh</a></li>
    <li><a href="../../staates/utt/l">Uttaranchal</a></li>
    <li><a href="../../staates/wb/l">West Bengal</a></li>

</ul>

以下是css代码

.ddsubmenustyle, .ddsubmenustyle div{ /*topmost and sub DIVs, respectively*/
font: normal 1.2vw;
margin: 0;
padding: 0;
position: absolute;
left: 0;
top: 0;
list-style-type: none;
background: white;
border: 1px solid black;
border-bottom-width: 0;
visibility: hidden;
z-index: 100;
}

.ddsubmenustyle ul{
margin: 0;
padding: 0;
position: absolute;
left: 0;
top: 0;
list-style-type: none;
border: 0px none;
}

.ddsubmenustyle li a{
display: block;
width: 180px; /*width of menu (not including side paddings)*/
color: white; 
background-color:#999999;
text-decoration: none;
padding: 4px 5px;
border-bottom: 1px solid black;
}
.ddsubmenustyle li a:hover{

background-color:#333333;  
}

* html .ddsubmenustyle li{ /*IE6 CSS hack*/
display: inline-block;
width: 180px; /*width of menu (include side paddings of LI A*/
}



/* ######### Neutral CSS  ######### */

.downarrowpointer{ /*CSS for "down" arrow image added to top menu items*/
padding-left: 4px;
border: 0;
}

.rightarrowpointer{ /*CSS for "right" arrow image added to drop down menu items*/
position: absolute;
padding-top: 3px;
left: 100px;
border: 0;
}

.ddiframeshim{
position: absolute;
z-index: 500;
background: transparent;
border-width: 0;
width: 0;
height: 0;
display: block;
}

Answer 1

这已经在这里得到了回答：加布里埃尔How to display an unordered list in two columns?。以下css应解决您的问题：

ul {
  columns: 2;
  -webkit-columns: 2;
  -moz-columns: 2;
}

我已经创建了jsfiddle来测试它并且它运行良好。看看http://jsfiddle.net/tralala/jg0zycfw/1/。

Answer 2

你试过在li上设置宽度吗？

ul{
   width:800px;
}

li{
  width: 40%;
  display: inline-block;

}

如何拆分长列表并在列中显示

2 个答案: