Question

假设可以动态更改列表子项的数量。如何相应地设置列表项的宽度，使总宽度为100％？

HTML：

<nav>
  <ul>
    <li>A</li>
    <li>B</li>
    <li>C</li>
    ...
  </ul>
<nav>

CSS：

nav {
  display: table;
}
ul {
  display: table-row;
}

ul li {
  display: table-cell;
  width: 100/numberOfChildren?;
}

Answer 1

最简单的方法是使用flexbox，虽然support is still not quite complete并且您可能需要为旧浏览器添加一大堆前缀，以防它们重要（我只是在这里包含所需的前缀并省略其余部分以简洁起见）：

nav ul {
    display: -webkit-flex;
    display: flex;
    width: 100%;
}

nav ul li {
    display: block;
    -webkit-flex: auto;
    flex: auto;
}

更具跨浏览器兼容性的解决方案是使用具有固定布局的display: table：

nav {
    display: table;
    width: 100%;
    table-layout: fixed;
}

nav ul {
    display: table-row;
}

nav ul li {
    display: table-cell;
}

请注意，在这两个解决方案中，列表项都没有width声明 - 这都是自动为您计算的。

Answer 2

这是通过js实现此目的的jsfiddle。

// DOM Elements

<button id="add">Add</button>
    <input id="new_text" type="text" />
<ul id='ulid'>
  <li>A</li>
</ul>

// CSS

li{
    background-color: #00FFFF;
    border-bottom: 1px solid #ddd;   
    list-style: none;
    display: inline-block;
    overflow: hidden;
    text-align: center;
}

ul{
    background-color: #F00;
    border-bottom: 1px solid #ddd;   
    width: 300px;
    padding: 0px;
}

// JS

$(document).ready(function(){
        $('#add').click(function(e){

            e.preventDefault();
            var text1 = $('#new_text').val();
            var obj=document.createElement('li');
            var newContent = document.createTextNode(text1); 
            obj.appendChild(newContent);
            $('#ulid').append(obj);

            var newWidth = (parseInt($('#ulid').width())/parseInt($('#ulid').children().length))-parseInt($('#ulid').children().length);

            $('li').css({'width':newWidth});
        });
});

http://jsfiddle.net/dipak_chandran/ju83dkv4/

根据孩子的数量设置<li>的宽度</li>

2 个答案: