61,115
社区成员
发帖
与我相关
我的任务
分享div宽度自适应
div+css 宽度自适应，隐藏超出部分，单击显示。求思路
<div>
<ul>
<li>1....</li>
<li>2....</li>
<li>3....</li>
<li>n....</li>
</ul>
</div>
1. li的内容是文字链接，文字长度不定，float: left；
2. li的个数不定；
3. div的宽度固定，当li的总长度大于div的宽度，隐藏超出部分，并显示更多链接“>>”，单击弹出层，显示超出部分的li；
4. 求最简单的思路，有代码更好。
<div>
<ul>
<li>1....</li>
<li>2....</li>
<li>3....</li>
<li>n....</li>
</ul>
</div>
1. li的内容是文字链接，文字长度不定，float: left；
2. li的个数不定；
3. div的宽度固定，当li的总长度大于div的宽度，隐藏超出部分，并显示更多链接“>>”，单击弹出层，显示超出部分的li；
4. 求最简单的思路，有代码更好。
...全文
请发表友善的回复…
发表回复
dalmeeme 2010-11-23
- 打赏
- 举报
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style>
div,ul,li,a {
margin:0;
padding:0;
}
body {position:absolute;}
li {
list-style-type:none;
}
#div1 {
float:left;
width:200px;
height:25px;
background:#ccc;
overflow:hidden;
}
#div1 ul li {
float:left;
height:25px;
}
#div2 {
position:absolute;
left:200px;
margin-left:5px;
}
a#more {
width:40px;
height:25px;
text-align:center;
line-height:25px;
color:blue;
background:#6e9;
text-decoration:none;
display:block;
}
ul#ul2 {
position:absolute;
top:25px;
left:0;
background:#eee;
display:none;
}
</style>
<script>
function abc(XdivId,Xul1Id,XaId,Xul2Id)
{
var div=document.getElementById(XdivId);
var ul1=document.getElementById(Xul1Id);
var anchor=document.getElementById(XaId);
var lis=ul1.getElementsByTagName("li");
var length=0,index;
for(var i=0;i<lis.length;i++)
{
length+=lis[i].clientWidth;
if(length>div.clientWidth)
{
index=i;
break;
}
}
var ul2=document.getElementById(Xul2Id);
for(var i=index;i<lis.length;i++)
{
ul2.appendChild(lis[i]);
i--;
}
}
var flag=true;
function display(XelementId)
{
var ul=document.getElementById(XelementId);
if(flag)
ul.style.display="block";
else
ul.style.display="none";
flag=!flag;
}
</script>
</head>
<body>
<div id="div1">
<ul id="ul1">
<li>1....</li>
<li>2....</li>
<li>3....</li>
<li>4....</li>
<li>5....</li>
<li>6....</li>
<li>n....</li>
</ul>
</div>
<div id="div2">
<a id="more" href="#" onclick="display('ul2')">more</a>
<ul id="ul2">
</ul>
</div>
<script>abc("div1","ul1","more","ul2")</script>
</body>
</html>我写了一个：单击超链接，显示隐藏部分；再次单击，不显示隐藏部分。在ie、firefox、谷歌下测试通过，仅供参考。
ajccom 2010-11-22
- 打赏
- 举报
<a href="sss.html" alt="我很长不过鼠标划上来，用户就能看见我的全部了" title="我很长不过鼠标划上来，用户就能看见我的全部了">我很长不过鼠标划上来，用户就能看见我的全部了</a>
这样楼主只要考虑隐藏超出部分就好了
ajccom 2010-11-22
- 打赏
- 举报
并显示更多链接“>>”，单击弹出层，显示超出部分的li；
我觉得不实用 还不如给<a>标签加alt和title值，比如
我觉得不实用 还不如给<a>标签加alt和title值，比如
<a href="sss.html" alt="我很长不过鼠标划上来，用户就能看见我的全部了" title="我很长不过鼠标划上来，用户就能看见我的全部了" />
