CSS背景颜色不是li

Question

我的页面顶部有一个导航栏，由ul和li元素创建。然而，当我让我的屏幕变小时，我突然出现身高问题。我在图片中向您展示。

如您所见，因为其中一个项目的高度较大，所以它不会填满整个空间。

我如何解决这个问题，我尝试了一切，高度100％等等，但它无法修复。 我给你CSS，因为html只是ul和li元素。

ul {
    list-style-type: none;
    padding: 0;
    margin-top: 10px;
    overflow: hidden;
    background-color: #6b3a8d;
}

li {
    float: left;
    width: 20%;
    height:100%;
}

li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    cursor: pointer;
    height: 100%;
}




li:hover {
    background-color: rgba(42,23,55,0.2)
}


.activated {

    background-color: #1ABFB4;
}

.activated:hover{
    background-color: rgba(26,191,180,0.9);
}

.nocopy{
    -webkit-user-select: none;  /* Chrome all / Safari all */
    -moz-user-select: none;     /* Firefox all */
    -ms-user-select: none;      /* IE 10+ */
    user-select: none;          /* Likely future */
}

Answer 1

当您使用float时，元素不尊重它的兄弟姐妹＆＃39;高度并不自动调整。你应该使用inline-block或flexbox。

使用flexbox（最灵活的解决方案）

＆＃13;

＆＃13;

ul {
    list-style-type: none;
    padding: 0;
    margin-top: 10px;
    overflow: hidden;
    background-color: #6b3a8d;
    
    /*------------ ADDED THE BELOW: -----------*/
    display: flex;
    align-items: stretch;
}

li {
    width: 20%;
}

li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    cursor: pointer;
    height: 100%;
}

li:hover {
    background-color: rgba(42,23,55,0.2)
}

.active{
    background-color: #1ABFB4;
}

.active:hover{
    background-color: rgba(26,191,180,0.9);
}

＆＃13;

<ul>
  <li class='active'>aa</li>
  <li>bb</li>
  <li>ccc dddd rrrr<br> ffff aaa</li>
</ul>

＆＃13;

＆＃13;

＆＃13;

你也可以给<ul>一个特定的高度。您的问题是li的高度百分比，但它不知道的内容的百分比，因为ul并未指定任何内容。