Question

好的，我有这个：

<div>
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
    </ul>
</div>

是否有设置div以便剪辑列表项？我想将div的高度设置为20px，足以仅显示列表中的第一项......并且在悬停时，我将高度更改为大约60px，并显示所有其他选项...

Answer 1

<style>
.clip {
    height:20px;
    overflow:hidden;
}
.clip:hover {
    height: auto;
    overflow: auto;
}
</style>

<div class="clip">
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
    </ul>
</div>

并进行一些过渡：

.clip {
     -moz-transition: height 0.3s ease-out;  /* FF4+ */
       -o-transition: height 0.3s ease-out;  /* Opera 10.5+ */
  -webkit-transition: height 0.3s ease-out;  /* Saf3.2+, Chrome */
      -ms-transition: height 0.3s ease-out;  /* IE10? */
          transition: height 0.3s ease-out; 
}

Answer 2

这很简单:-)看看this fiddle我已经弥补了你。这里的关键是overflow: hidden属性;它会将内容剪辑到div的设定高度。

<强> HTML

<div>
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
    </ul>
</div>

<强> CSS

div
{
    height: 20px;
    line-height: 20px;
    overflow: hidden;
    background: #76a7dc;
}

div:hover
{
    height: auto;
    overflow: auto;
}

修改在:hover伪类上，我从@roryf中获取了两个属性。谢谢你的提示。基本上，这意味着如果添加更多列表元素，无论您拥有多少元素，元素都会调整大小以适应。

Answer 3

你不需要为了你的目的而在div中剪切列表元素。只需使用javascript框架（ex.jquery）在hover / mouse-out上显示/隐藏li元素

是否可以使用div剪辑无序列表？

3 个答案: