Question

我有以下代码：

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%，它会调整其他菜单项，但它没有改变任何东西。

如何实现？

Answer 1

关于CSS这个属性

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

for pretty finally

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

＆＃13;

   .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;
    }

＆＃13;

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

＆＃13;

水平<ul>列表（菜单）元素尽管高度不调整高度：100％

1 个答案: