如何在锚标记内定位两个元素

Question

我正在尝试构建一个水平导航栏，其中每个li标记都有一个元素：a标记;在这个元素中，另外两个元素是一个在另一个之下，第一个在顶部，第二个在底部。这两个元素是p标记和div标记。

这是我的尝试：

以下是代码：

<div class="nav">
<ul id="menu-navigation-bar" class="menu">
<li class="menu-item-72"><a href="http://localhost:8888/wordpress/about/"><p>About</p><div></div></a></li>
<li class="menu-item-71"><a href="http://localhost:8888/wordpress/services/"><p>Services</p><div></div></a></li>
<li class="menu-item-70"><a href="http://localhost:8888/wordpress/work/"><p>Work</p><div></div></a></li>
<li class="menu-item-69"><a href="http://localhost:8888/wordpress/contact/"><p>Contact</p><div></div></a></li>
</ul>
</div>

CSS：

/*navigation*/
.nav {
    width: 100%;
    height: 200px;
    margin: 0 auto;
    position: absolute;
}

.nav .menu {
    height: 200px;
    list-style-type: none;
    text-align: center;
}

.nav .menu li {
    letter-spacing: 0.1em;
    display: inline;
    padding-left: 110px;
    padding-right: 110px;
    position: relative;
}

.nav .menu li.current_page_item a {
    text-decoration: underline;
}

.nav .menu li a:hover {
    color: #929292;
}

.nav .menu li a p {
    font-size: 1em;
    position: absolute;
}

.nav .menu li a div {
    position: absolute;
    width: 150px;
    height: 100px;
    background-color: red;
    display: inline;
}

我做错了什么？
谢谢！

Answer 1

您绝对定位子元素并希望它们的行为与它们相对定位一样，您还要使列表项显示inline，而不是inline-block，这会产生意外行为。

Demo Fiddle

将您的CSS更改为（请参阅下面的替代方案）：

/*navigation*/
 .nav {
    width: 100%;
    height: 200px;
    margin: 0 auto;
    position: absolute;
}
.nav .menu {
    height: 200px;
    list-style-type: none;
    text-align: center;
}
.nav .menu li {
    letter-spacing: 0.1em;
    display: inline-block;
    padding-left: 110px;
    padding-right: 110px;
    position: relative;
}
.nav .menu li.current_page_item a {
    text-decoration: underline;
}
.nav .menu li a:hover {
    color: #929292;
}
.nav .menu li a p {
    font-size: 1em;
}
.nav .menu li a div {
    width: 150px;
    height: 100px;
    background-color: red;
    display:
}

也就是说，你的物品上的衬垫间距很远，你可能想把它移开：

Demo Fiddle