Question

我的网页遇到了问题。我正在使用左侧的图标菜单，当我将光标放在图标上时，它会显示Int.max。我的列表有点长，如果窗口较小，我希望它显示滚动条：

18,446,744,073,709,551,613

<{1>}下的

。

这样做，span隐藏在右侧的滚动条下。如果您删除溢出项目，overflow-y: auto; overflow-x: hidden;会过去，这就是我想要实现的目标。很遗憾，如果您删除#navigationMenu下的span项，则该菜单无法滚动。

为了更好地理解，我创造了一个关于它的小提琴： https://jsfiddle.net/x2rLaaqL/3/

＆＃13;

span

＆＃13;

overflow

＆＃13;

＆＃34;罪魁祸首＆＃34;是#navigationMenu。

body {
  height: 100%;
  margin-left: 150px;
}
ul {
  height: 100%;
  width: 3%;
  margin: 0;
  padding: 0;
  position: fixed;
}
ul.navbar {
  list-style-type: none;
  padding: 0px;
  margin: 0;
  top: 0em;
  left: 0em;
  min-width: 2.5%;
  z-index: 10;
}
ul.navbar li {
  margin: 0.3em;
  padding: 0.3em;
}
ul.navbar a {
  text-decoration: none;
}
#navigationMenu {
  position: fixed;
  width: 65px;
  overflow-y: auto;
  overflow-x: hidden;
}
#navigationMenu li {
  list-style: none;
  height: 35px;
  padding: 2px;
  width: 20px;
}
#navigationMenu span {
  width: 0;
  left: 40px;
  padding: 0;
  position: absolute;
  overflow: hidden;
  font-size: 125%;
  font-weight: bold;
  letter-spacing: 0.6px;
  white-space: nowrap;
  line-height: 39px;
  -webkit-transition: 0.25s;
  -moz-transition: 0.25s;
  transition: 0.25s;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.8);
  border-radius: 5px;
  -webkit-border-radius: 10px;
}
#navigationMenu a {
  height: 39px;
  width: 38px;
  display: block;
  position: relative;
}
#navigationMenu a:hover span {
  width: auto;
  padding: 0 20px;
  display: inline-block;
}
#navigationMenu a:hover {
  text-decoration: none;
  -moz-box-shadow: 0 0 5px #9ddff5;
  -webkit-box-shadow: 0 0 5px #9ddff5;
  box-shadow: 0 0 5px #9DDFF5;
}
/* Green Button */

#navigationMenu #testClass {
  background: url(https://upload.wikimedia.org/wikipedia/en/thumb/3/34/AlthepalHappyface.svg/256px-AlthepalHappyface.svg.png) no-repeat;
  background-size: contain;
}
#navigationMenu #testClass:hover {
  background: url(https://upload.wikimedia.org/wikipedia/en/thumb/3/34/AlthepalHappyface.svg/256px-AlthepalHappyface.svg.png) no-repeat;
  background-size: contain;
}
#navigationMenu #testClass span {
  background-color: #7da315;
  color: #3d4f0c;
  text-shadow: 1px 1px 0 #99bf31;
}

Answer 1

将overflow: hidden父级的子元素“out”的唯一方法是设置position，static除position以外设置fixed以使溢出生效孩子到fixed：

https://jsfiddle.net/x2rLaaqL/4/

这在大多数情况下都不起作用（更确切地说，在父级不是fixed的情况下 - 然后它可以从其fixed子项中“离开”），但在您的情况下，因为父级是 >>> :info (*) class Num a where ... (*) :: a -> a -> a ... -- Defined in `GHC.Num' infixl 7 *，这可以解决您的问题。

使跨度重叠＆＃34;溢出＆＃34;

1 个答案: