html - 设计跨度以使用列表项的 100% 高度

Question

我正在尝试显示一系列名称值对，其中 span 元素向左浮动并占据父级高度的 100% <li>元素。 (创建左列。)

我知道如果我为 <li> 设置固定高度， 有用。但是，我想要 <li> content 来确定高度以支持内容换行。

参见 JSFiddle:http://jsfiddle.net/aRXet/

        <ul>
            <li><span>Name</span>Value</li>
            <li><span>Name</span>Value</li>
            <li><span>Name</span>Value</li>
            <li><span>Name</span>Value</li>
            <li><span>Name</span>Value</li>
            <li><span>Name</span>Value</li>
            <li><span>Name</span>Value</li>
        </ul>

  li {
    position: relative;
    list-style: none;
    background-color: #7492a1;
    padding: 0 5px 0 0;
    color: white;
    font-size: emCalc(12px);
    margin:0 0 5px 0;
    height:100%;
    clear: both;
    float: left;

  }

  li span {
    position: relative;
    background-color: #888f99;
    margin: 0 5px 0 0;
    padding: 0 5px;
    width: emCalc(62px);
    clear: both;
    float: left;
    height: 100%;
  }

Answer 1

问题是，li 有填充和边距。特别是边距是造成 5px 空白的原因。去掉 li 的 padding 和 margin 即可解决问题。如果您希望文本之间有更多空间，请向 span 添加任何填充:

http://jsfiddle.net/aRXet/2/

 li {
      padding: 0;
      margin: 0;
      ....
  }
  li span {
      margin: 0 5px 5px 0;
      padding: 0 10px;
      ....
  }