6885953
2015-04-15 00:46
采纳率: 66.7%
浏览 1.6k
已采纳

关于CSS样式的OVERFLOW

图片说明
为什么的打开效果一打开 就会覆盖第二个文本 而不是自动会和第二文本文档之间拉开巨鹿

 <!--<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script>
function change()
{   
    var dtNode = event.srcElement;
    var dlNode = dtNode.parentNode;
    //var dlNode = document.getElementsByTagName("dl")[0];

    if(dlNode.className=="open")
    {
        dlNode.className="close";
        }
    else{
        dlNode.className="open";
        }   
    }
</script>
<style type="text/css">
.open{ 
    overflow:visible
}

.close{
    overflow:hidden
}

dl{

    overflow:hidden;
    height:16px;
    }

</style>
</head>

<body>
<dl>
    <dt onclick="change()">aaaaaaaaaaaaaaaaaaaa</dt>
    <dd>bbb</dd>
    <dd>bbb</dd>
    <dd>bbb</dd>
    <dd>bbb</dd>
</dl>

<dl>
    <dt onclick="change()">aaaaaaaaaaaaaaaaaaaaaaaa</dt>
    <dd>bbb</dd>
    <dd>bbb</dd>
    <dd>bbb</dd>
    <dd>bbb</dd>
</dl>
<dl>
    <dt onclick="change()">aaaaaaaaaaaaaaaaaaaaaa</dt>
    <dd>bbb</dd>
    <dd>bbb</dd>
    <dd>bbb</dd>
    <dd>bbb</dd>
</dl>
</body>
</html>
-->

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

2条回答 默认 最新

  • 已采纳

    open样式增加height:auto,要不继承你的16px,现实的当然是这样

     .open{ 
        overflow:visible;height:auto
    }
    
    点赞 打赏 评论
  • 6885953 2015-04-15 00:48
    点赞 打赏 评论

相关推荐 更多相似问题