Question

我在无序列表中有一个菜单 - 我需要让每个<li>成为其父级的高度。我知道这是非常基本的，我不确定我做错了什么。

<div class="menu">
  <ul>
    <li class="current_page_item">
        <a href="#">Home</a>
     </li>
    <li class="page_item page-item-2">
       <a href="index.php/sample-page/">Sample Page</a>
    </li>
 </ul>
</div>

我有以下CSS：

.main-navigation ul {
    float: left;
    list-style: outside none none;
    margin: 0;
    padding-left: 16px;
    padding-right: 16px;
}

我没有包含它的div的任何CSS规则。

以上内容包含在标签中，我没有设置任何高度。它是包含在其中的图像的高度。实际的网站是：http://notthedroidyouarelookingfor.com/

我需要将每个<li>设为其父级的高度，以便在链接处于活动状态时设置顶部边框。

Answer 1

你需要手动或通过脚本设置高度，我相信这在css中无法实现。

父级'div.menu'也不是徽标图像的高度，因为ul是float：left。你实际上需要将float：left应用于div.main以防万一以确保你不会再遇到任何问题。

Answer 2

块元素的高度默认为块的高度内容。所以，给出这样的东西：

<div id="outer">
    <div id="inner">
        <p>Where is pancakes house?</p>
    </div>
</div>

#inner会变得足够高，以包含段落和   #outer会变得足够高，可以包含#inner。

当您将高度或宽度指定为百分比时，则为a   相对于元素父元素的百分比。在宽度的情况下，   除非另有说明，否则所有块元素都与它们一样宽   父母一直回到<html>;所以，块的宽度   元素与其内容无关，并且width: 50%表示a   明确定义的像素数。

但是，块元素的高度取决于其内容   除非您指定特定高度。所以之间有反馈   关注身高的父母和孩子说height: 50%   除非您打破反馈循环，否则不会产生明确定义的值   通过给父元素一个特定的高度。

上述学分适用于@muistooshort：https://stackoverflow.com/a/5658062/4966662

我想你想要将每个li的高度设置为垂直对齐菜单，如果我是对的，这里你有一个使用flexbox的解决方法：

body{
    margin: 0;
}
.main-navigation {
    background-color: #fff;
    margin-left: auto;
    margin-right: auto;
    -webkit-box-shadow: 3px 2px 2px 0px rgba(0, 0, 0, 0.75);
    -moz-box-shadow: 3px 2px 2px 0px rgba(0, 0, 0, 0.75);
    box-shadow: 3px 2px 2px 0px rgba(0, 0, 0, 0.75);
    margin-bottom: 4px;
}
#middleNavigation {
    margin-left: auto;
    margin-right: auto;
    width: 960px;
    display: flex;
}
.main-navigation a {
    font-size: 1.4rem;
    font-size: 14px;
    font-weight: normal;
    margin-left: 1em;
    text-decoration: none;
    padding: 0 0.8em;
    word-spacing: 4px;
    font-family: Arial;
    color: #000;
    border-top: 4px solid transparent;
    display: flex;
    align-items: center;
}
.main-navigation a:hover {
    border-top-color: #000;
}

<nav role="navigation" class="site-navigation main-navigation">
    <div id="middleNavigation">
        <img src="http://notthedroidyouarelookingfor.com/wp-content/themes/striker/images/NTDYALF-Logo.png" alt="" id="NTDYALFLogo">
      
        <a href="http://notthedroidyouarelookingfor.com/"><span>Home</span></a>

        <a href="http://notthedroidyouarelookingfor.com/index.php/sample-page/"><span>Sample Page</span></a>

    </div>
</nav>
    
<p>Hover the links to see the border</p>

这是一个与

一起工作的JSFiddle

使父级

2 个答案: