水平列表（菜单）的元素不调整高度，尽管高度：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>当我使浏览器窗口足够小时，菜单第一个元素的文本将显示在两行中，从而使这个菜单元素比其他菜单元素大。还包含<代码>
如何实现这一目标？
共有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>-
问题内容： 在设计布局时，我将元素设置为，但是在某些情况下，这失败了，那么应该使用什么？ 要么 嗯，这不是基于意见的，因为每种方法都有其自身的缺陷，那么推荐的方法是什么？为什么？ 问题答案： 如果你想背景图片适用于和，填补了整个浏览器窗口，两者都不是。使用此代替： 我的推理在这里给出（在此我全面解释如何以这种方式应用背景）： 顺便说一句，你为什么要注明原因，并以和分别为，因为无论元素有什么内在的高
-
问题内容： 我使用此 CSS将最大高度设置为 谁能给我一个普遍的答案， 和 之间有什么区别？ 问题答案： 这是W3Clink的解释： 以下算法描述了两个属性[min-height和max-height]如何影响’height’属性的使用值： 临时使用的高度是根据上面“计算高度和边距”下的规则计算的（不包括“最小高度”和“最大高度”）。 如果此暂定高度大于“最大高度”，则会再次应用上述规则，但是这次
-
问题内容： 我在flexbox列上遇到了麻烦，因为flex’d元素的子元素无法以百分比响应。我仅在Chrome浏览器中进行了检查，据我了解，这只是Chrome浏览器的问题。这是我的示例： HTML CSS 我想要它，以便红色填充蓝色。为什么不起作用？ 问题答案： TL; DR： 设置为，并摆脱on 。[您可以在此处查看修改后的CodePen。] 工作原理： 我从这个类似的问题中学到，根据flexb
-
好的，所以我已经阅读了这个网站和其他多个网站上对这个问题和类似问题的每个答案，但是似乎都没有用。我有一个基本的网页，上面有一张地图。我的任务是在浏览器窗口中全屏制作地图，而不是在计算机屏幕上全屏。下面是我正在使用的代码片段。我把我的宽度设置为100%，效果很好。我也试着把我的高度设置为100%，但是当这种情况发生时，地图会从页面上消失。我还尝试将高度设置为自动，但这给了我与高度100%相同的结果。
-
场景- > TableView高度是使用纵横比相对于superview的高度动态设置的。 TableViewCell的高度是根据表格视图的高度计算的： 问题 - 最初在委托方法中没有正确计算表格视图高度。但在滚动单元格后正确计算。 尝试的解决方案： 在视图中重新加载。 调用 在单元格中进行. 有什么方法可以正确计算出这个表格的高度吗？
-
问题内容： 允许用户调整窗口的宽度和高度。是否存在允许用户仅调整高度大小的方法？ 谢谢。 编辑： 下面的解决方案似乎不起作用。在360x600 JFrame上， 仍然允许完全拉伸JFrame的宽度，而设置则不允许任何拉伸。 问题答案： 下面的代码可以正确完成工作。