Question

我想要一个流畅的水平列表，右侧是静态“浏览全部”。如果可能的话，我希望这是一个无序列表。

唯一的问题是，随着屏幕变窄，当空间不存在时，我想隐藏最右边的物品（不包括：最后一个）。

Item One | Item Two | Item Three | Item Four | Browse All

有没有办法用CSS完成这个或者我需要进入一些JavaScript吗？如果我需要使用JavaScript，那么最好的方法是什么？我是否可以检测到有多少可见并设置每个宽度？我尝试使用CSS媒体查询，但列表项的可变字符长度使这很困难。

非常感谢任何帮助。

Answer 1

在最后一项和全部浏览器之间留下空隙，但根本不使用任何脚本。

<!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>
    <style type="text/css">
        body > div > div > span
        {
            display: inline-block;
            padding: 0px 4px;
            border-right: 2px solid #ccc;
        }
    </style>
</head>
<body>

    <div style="display: table;">
        <div style="height: 24px; line-height: 24px; overflow: hidden;">
            <span>Item One</span>
            <span>Item Two</span>
            <span>Item Three</span> 
            <span>Item Four</span> 
            <span>Item Five</span> 
            <span>Item Six</span>
        </div>
        <div style="display: table-cell; white-space: nowrap; padding-left: 4px;">Browse All</div>
    </div>

</body>
</html>

Answer 2

这是一个JavaScript + jQuery解决方案：http://jsfiddle.net/thirtydot/37FtV/

//remove inline-block gaps
$('#menu').contents().filter(function() {
    return this.nodeType === 3;
}).remove();

$(window).resize(function() {
    $('#menu li').show();
    var checkWidth = 0;

    while (true) {
        checkWidth = 0;
        $('#menu li:visible').each(function() {
            checkWidth += $(this).outerWidth();
        });
        if ($(window).width() < checkWidth) {
            $('#menu li:not(:last-child):visible:last').hide();
        } else {
            break;
        }
    }
}).resize();

Answer 3

<xmp>
<!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>Untitled Document</title>
<script src="http://code.jquery.com/jquery-1.7.min.js"></script>
  <style type='text/css'>
        #categories-container { max-width: 950px; width: 100%; margin: 0 auto; height:38px; overflow: hidden; background-color: #ccc; transition:all 300ms ease-in}
    #categories { list-style: none; padding: 0 90px 0 0; margin: 0 auto; height:auto; display:inline-block; }
    #categories li { float: left; background-color: #ddd; }
    #categories li.last { position: absolute; right: 0; }
    #categories li a { color: #222; text-decoration: none; display: block; padding: 10px; white-space: nowrap; }
    #categories li a:hover { background-color: #bbb; }
    li ul,li ul > li ul{display:none; position:absolute; list-style:none}
    li ul li{clear:both; list-style:none}
    li:hover ul{display: list-item}
  </style>      
<script> 
jQuery(document).ready(function(e) {
    jQuery("#browse").toggle(
    function(){         
        jQuery("#categories-container").height($("#categories").height());
    },
    function(){
        jQuery("#categories-container").height("38px");
    }   
    );
});
</script>
</head>
<body>
    <div id="categories-container">
    <ul id="categories">
      <li><a href="#">Anatomy Models</a>
      <ul>
        <li class=""><a href="#">Test 1</a></li>
        <li><a href="#">Test 2</a></li>
        <li><a href="#">Test 3</a></li>
        <li><a href="#">Test 4</a></li>
      </ul>
      </li>
      <li><a href="#">Anatomy Models</a></li>
      <li><a href="#">Anatomy Models</a></li>
      <li><a href="#">Anatomy Models</a></li>
      <li><a href="#">Anatomy Models</a></li>
      <li><a href="#">Anatomy Models</a></li>
      <li class="last"><a href="#" id="browse">Browse All</a></li>
    </ul>
  </div>      
</body>
</html>

http://jsfiddle.net/37FtV/11/

CSS - 流体水平列表，1个静态项目，当有限空间时隐藏项目

3 个答案: