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;
}

或float it to the left。

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

您只能对内嵌元素进行左右填充。这些都是规格。每个属性都应该应用于“在行中”，该行由父元素的line-height属性定义。详细了解in this article.

为什么只是把它漂浮起来呢？

Floats将其转换为块元素。

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

1 个答案: