Question

我有一个问题，尽管顶部的<div>元素似乎在其上方包含<div>，尽管源代码表明情况并非如此。下图显示了这种效果，您可以看到我的水平标题似乎与包含“ place” <div>标签的<div>包含在同一<h2>中，但是它是不，这不应该发生。

这是此部分的HTML：

<div class="tabSection">
                <div class="tabDiv">
                    <ul class="tabsList">
                        <li class="tabItem"><i class="fas fa-globe-europe"></i>Places</li>
                        <li class="tabItem"><i class="fas fa-skiing"></i>Activities</li>
                        <li class="tabItem"><i class="fas fa-info-circle"></i>More Info</li>
                        <li class="tabItem"><i class="fas fa-phone-alt"></i>Contact Us</li>
                    </ul>
                </div>

                <div id="placeTabBody" class="tabBody">
                    <h2 class="tabHeader">Place</h2>
                </div>

                <div id="activitiesTabBody" class="tabBody">
                    <h2 class="tabHeader">Activities</h2>
                </div>

                <div id="moreInfoTabBody" class="tabBody">
                    <h2 class="tabHeader">More Information</h2>
                </div>

                <div id="contactUsTabBody" class="tabBody">
                    <h2 class="tabHeader">Contact Us</h2>
                </div>
            </div>
        </div>

这是CSS：

.tabsList {
    list-style: none;
    margin-left: 10px;
    display: block;
}

.tabsList li {
    display: block;
    float: left;
    font-size: 18pt;
    width: 155px;
    cursor: pointer;
    margin-right: 18px;
    margin-top: 20px;
    border-bottom: 2px solid #e84118;
    transition: 0.3s;
}

.tabsList li:hover {
    border-color: #44bd32;
}

.tabsList li i {
    margin-right: 7px;
}

.tabBody {
    display: block;
    background-color: red;
    width: 100%;
    margin: 10px 0 10px 10px;
}

请帮助！

Answer 1

似乎缺少浮点清除。将height: auto和overflow:hidden添加到.tabsList

.tabsList {
    list-style: none;
    margin-left: 10px;
    display: block;
    height: auto;
    overflow: hidden;
}

为什么此<div>包含以前的div？

1 个答案: