水平<ul>列表(菜单)的元素不调整高度，尽管高度：100%

我有以下代码：

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%，它将调整其他菜单项，但没有更改任何内容。

如何实现？

在CSS上此属性

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

for There There终于

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>

相关内容

最新更新

热门标签：