列表中包含的锚点上的填充不会调整列表项的高度

Question

我想知道,为什么在嵌套在无序链接中的锚上设置垂直填充不会调整列表项高度的大小.正如你在jsfiddle上看到的那样,标签比ul组件大,所以它与下面的div重叠.

我希望li和ul的内容一样高,所以带有段落的div会向下移动.

HTML

<div class="tab-row">
    <ul>
        <li>
            <a href="#"><span>Tab 1</span></a>
        </li>
        <li>
            <a href="#"><span>Tab 2</span></a>
        </li>
    </ul>
</div>
    <div class="tab-content">
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla tincidunt semper quam. Suspendisse potenti. Donec adipiscing consequat erat. 
            Morbi semper, libero vel pulvinar tincidunt, lorem lorem scelerisque felis, sed tempor dolor dolor non felis. Quisque eu est. 
            Quisque blandit, pede non commodo convallis, purus elit pellentesque neque, in tempor libero dolor quis quam. Quisque eros. Vivamus porttitor. 
            Aenean quis odio. Cras commodo risus ac est. Fusce molestie, lacus at sagittis fermentum, dolor eros ultrices tellus, ac sollicitudin pede risus.</p>
    </div>
</div>

CSS

ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
}
.tab-row li {
    display: inline;
}
.tab-row li a {
    border: 1px solid #CCCCCC;
    padding: 10px;
    text-decoration: none;
}
.tab-content {
    border1px solid #CCCCCC;
}
.tab-content p {
    text-align: justify;
    margin: 10px;
}

Answer 1

因为您正在为内联元素添加填充.加:

.tab-row li a {
   display: inline-block;
}

或者将它漂浮到左侧.

为什么在内联元素上设置填充不起作用？

您只能对内嵌元素进行左右填充.这些都是规格.每个属性都应该应用于"在行中",该行由父元素的line-height属性定义.在本文中阅读更多相关信息.

为什么只是浮动它也有效？

Floats将其转换为块元素.