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

问题描述

| 好的，我有这个：

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

无论如何，是否有必要设置div以便裁剪列表项？我想将div的高度设置为20px，足以仅显示列表中的第一项...悬停后，我将高度更改为约60px，并显示所有其他选项。 ..     

解决方法

        

<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; 
}

    ,        就像馅饼一样简单：-)看一下我为您准备的小提琴。这里的关键是

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获得了两个属性。谢谢你的提示。基本上，这意味着如果您添加更多列表元素，则无论您有多少元素，元素的大小都将调整为适合您的大小。     ,        您不需要为自己的目的在div中剪切列表元素，只需使用javascript框架（例如jquery）在悬浮/鼠标移出时显示/隐藏锂元素