7

我想知道，为什么在嵌套在无序链接中的锚上设置垂直填充不会调整列表项的高度。正如您在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;
}
4

1 回答 1

12

因为您正在向内联元素添加填充。添加：

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

或将其浮动到左侧。

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

您只能对内联元素进行左右填充。这些是规格。每个属性都应该应用在“行内”，行由父元素的 line-height 属性定义。在本文中阅读有关它的更多信息。

为什么只是漂浮它离开工作呢？

浮点数将其转换为块元素。

于 2013-05-14T09:56:19.153 回答