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 に答える