水平 <ul> 列表（菜单）的元素尽管高度不调整高度：100% [重复]答案

【问题标题】：Element of horizontal <ul> list (menu) don't adjust height inspite of height: 100% [duplicate]水平 <ul> 列表（菜单）的元素尽管高度不调整高度：100% [重复]
【发布时间】：2018-10-02 11:50:27
【问题描述】：

我有以下代码：

li.hMenu {
    background: red;
    width: 33.33%; /*for the older browsers fallback */
    width: calc(100% / 3);
    height: 100%;
    float: left;
}

li.hMenu:hover{
    background-color: darkred;
}

li.hMenu:active{
    position: relative;
    left: 1px;
    top: 1px;
    background-color: darkred;
}

#menu {
    width: 100%;
    overflow: hidden;
    margin: 0;
    padding: 0;
    list-style-type: none;
    border: 1px solid black;
}

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

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <link rel="stylesheet" href="CommonLayout.css" />
    <script src="ProjectPage.js"></script>
</head>
<body>
    <ul id="menu">
        <li style="z-index: 10" class="hMenu">
            <a href="ProjectPage.html">Main Page</a>
        </li>
        <li style="z-index: 9" class="hMenu">
            <a href="About.html">About</a>
        </li>
        <li style="z-index: 8" class="hMenu">
            <a href="Calculator.html">Calculator</a>
        </li>
    </ul>

    <p>This is <em>Main Page</em> page.</p>

</body>
</html>

当我使浏览器窗口足够小时，菜单的第一个元素的文本显示为两行，从而使这个菜单元素比其他元素大。还包含 <div> 扩展。我想，如果我指定height: 100%，它会使其他菜单项调整，但它没有改变任何东西。

如何实现？

【问题讨论】：

height:100% 在这里没有效果...父元素上没有定义高度
@TemaniAfif 如果我在父元素上定义max-height，它也不起作用。
@TemaniAfif 这才刚刚开始我的网络开发之路，我已经欠你太多了……谢谢！
在这种情况下，我只是建议您摆脱浮动并使用更高级的技术，例如 flexbox（这里是一个示例jsfiddle.net/atuvqn8o/2）...您仍处于起步阶段，但我告诉您从现在开始，您将面临许多浮动非常难以解决的问题，因此最好从现在开始使用其他技术，即使它们在开始时可能有点困难
这是一个很好的教程：css-tricks.com/snippets/css/a-guide-to-flexbox

标签： html css

【解决方案1】：

在 CSS 这个属性上

ul#menu li {
    white-space : pre;
 }

终于漂亮了

ul#menu li {
    white-space : nowrap;
    text-overflow: ellipsis;
    overflow-x: hidden;
    min-width: 100px;

   .one {
        white-space : nowrap;
        text-overflow: ellipsis;
        overflow-x: hidden;
        min-width: 20px;
         width: 40px;
        border:1px solid #000;
     }
    .two {
        white-space : pre;
        width: 40px;
         overflow-x: hidden;
        border:1px solid #000;
     }
   .cero{
        border:1px solid #000;
    }

    <div class="two"> holaaaaaaaaaaaaaaaa </div>
    <div class="one"> holaaaaaaaaaaaaaaaa </div>
    <div class="cero"> holaaaaaaaaaaaaaaaa </div>

【讨论】：