Question

我有一个项目，我必须制作一个菜单，当你点击一个图标时，会根据你点击的图标显示一个div。

我有顶部的菜单，以及将在其下显示的div。在一个特定的div中，我有义务将其分成两个50％的div。我创建了一个div并添加了float:left以使其向左移动，但它已经消失了，我不知道问题是什么。如果我将这个div嵌入另一个名为cover的div中，可以解决这个问题，但是我不想这样做，因为它不属于那个div。

HTML：

<div class="about-menu">
    <li class="about-menu-item fol"><i class="fa fa-share-alt"></i></li>
    <li class="about-menu-item abo"><i class="fa fa-user"></i></li>
    <li class="about-menu-item int"><i class="fa fa-heart"></i></li>
    <li class="about-menu-item gal"><i class="fa fa-image"></i></li>
    <li class="about-menu-item quo"><i class="fa fa-quote-left"></i></li>
</div>
<div class="section-identity">
    <div class="faf">
        <div class="fers">
            <!-- this is the div that represents 50% but goes down -->
        </div>
    </div>
</div>

CSS：

.about-menu {
    width: 100%;
    height: 50px;
    background-color: #fff;
    border-radius: 2px;
    box-shadow: 0px 1px 1px rgba(117,117,117,0.1);
    position: relative;
    top: -140px;
    margin:0;
}
.about-menu li {
    width: 20%;
    height: 100%;
    padding: 5px;
    float: left;
    position: relative;
    margin: 0;
    cursor: pointer;
}
.about-menu li:hover {
    border-bottom: 4px solid #738ffe;
}
.about-menu li i {
    font-size: 14px;
    color: #bdbdbd;
    text-align: center;
    margin-top: 13px;
}
.section-identity {
    width: 100%;
    height: 200px;
    z-index: 702;
    position: relative;
    top: 70px;
}
.faf {
    width: 100%;
    height: 80px;
    background: #fff;
    position: relative;
    z-index: 703;
}
.fers {
    width: 50%;
    height: 100%;
    position: relative;
    float: left;
}

Answer 1

您应该box-sizing: border-box;使用.about-menu li并使用ul标记代替div类.about-menu标记。

JSFiddle - DEMO

<强> HTML：

<ul class="about-menu">
    <li class="about-menu-item fol"><i class="fa fa-share-alt"></i>
    </li>
    <li class="about-menu-item abo"><i class="fa fa-user"></i>
    </li>
    <li class="about-menu-item int"><i class="fa fa-heart"></i>
    </li>
    <li class="about-menu-item gal"><i class="fa fa-image"></i>
    </li>
    <li class="about-menu-item quo"><i class="fa fa-quote-left"></i>
    </li>
</ul>

<强> CSS：

.about-menu {
    width: 100%;
    height: 50px;
    background-color: #ddd;
    border-radius: 2px;
    box-shadow: 0px 1px 1px rgba(117, 117, 117, 0.1);
    position: relative;
    top: 0px; /* It was top: -140px; before, I've removed that and it's only for demo */
    margin: 0;
    padding: 0;
}

.about-menu li {
    box-sizing: border-box;
    width: 20%;
    height: 100%;
    padding: 5px;
    float: left;
    position: relative;
    margin: 0;
    cursor: pointer;
    list-style: none;
}

向左飘浮;并在css中定位

1 个答案: