2

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

我知道如果我为 设置一个固定的高度<li>，它就可以工作。但是，我希望<li>内容确定高度以支持内容换行。

见 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%;
  }
4

3 回答 3

1

问题是，li有填充和边距。尤其是边距是 5px 空白的原因。从 中删除填充和边距li以解决问题。span如果您希望文本之间有更多空间，请添加任何填充：

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

 li {
      padding: 0;
      margin: 0;
      ....
  }
  li span {
      margin: 0 5px 5px 0;
      padding: 0 10px;
      ....
  }
于 2013-07-19T21:03:30.413 回答
1

如果您将填充和边距设置为 0，您将看到跨度为 100%

padding:0;
margin:0;

http://jsfiddle.net/kevinPHPkevin/aRXet/4/

要获得您想要的效果，请设置高度和线高

演示http://jsfiddle.net/kevinPHPkevin/aRXet/5/

li {
    // other css
    height:30px;
    line-height:30px;    
}
于 2013-07-19T21:03:33.030 回答
0

您可以通过将 span 元素的位置设置为absolute position使用一些 js 东西来调整其父li元素高度来完成您想要的。

ul{
  margin: 0;
  padding: 0 10px;
  list-style: none;
}

li{
  color: #555;
  margin: 0 0 15px;
  position: relative;
  padding-left: 110px; //SPAN WIDTH + 10px ~ li's PADDING
}

li span{
  left: 0;
  position: absolute;

  color: #000;
  width: 100px; //MAX SPAN WIDTH
  display: block;
  font-weight: 700;
  margin-bottom: 20px;
}

调整li 高度（使用 jQuery）

$("ul li span").each(function(){
  if ($(this).height() > $(this).parent().height() ) {
    $(this).parent().height($(this).height());
  }
});

演示

于 2013-07-20T01:55:46.363 回答