代码之家  ›  专栏  ›  技术社区  ›  fearofawhackplanet

填充<li>

  •  3
  • fearofawhackplanet  · 技术社区  · 15 年前

    here

    我正在申请 padding-top 到一个 li 更大,尽管有足够的空间来容纳文本。

    有什么想法吗?

    <ul>
        <li class="padded">x</li>
        <li>x</li>
    </ul>​
    
    li {
            width: 25px;
            height: 25px;
            border: solid 1px black;
            display: inline;
            margin: 0 2px 0 0;
            float: left;
    }
    
    .padded {
        padding: 3px 0 0 0;
        text-align: center;
    }
    

    我在IE7和Chrome中得到了相同的结果,没有检查任何其他浏览器。

    1 回复  |  直到 15 年前
        1
  •  8
  •   matthughes404    15 年前

    这个li.填料它越来越大,因为你有一个25像素的高度加上一个3像素的填充顶部。

    你应该降低li.填料如果您想增加顶部填充,但它保持与普通列表项相同的高度。所以要有一个25px高的块,上面有3px的填充,你应该设置高度为22px,上面有3px的填充。

    li {
            width: 25px;
            height: 25px;
            border: solid 1px black;
            display: inline;
            margin: 0 2px 0 0;
            float: left;
    }
    
    .padded {
        padding-top: 3px;
        height:22px /* original height (25px) minus padding-top (3px) */
        text-align: center;
    }