每个带有阴影边框的 div 的导航选项卡

#nav {
  position: fixed;
  height: 100%;
  left: 0px;
  right: 0px;
  top: 0px;
  width: 10%;
  background-color: blue;
}
#nav>div {}

<html>
<div id="nav">
  <div>up</div>
  <div>down</div>
  <div>left</div>
  <div>right</div>
</div>
</html>

我如何使每个div 的内部#nav出现在一个等于#nav长度的黄色框中，无论有多少个div？

试试这个

#nav {
  position: fixed;
  height: 100%;
  left: 0px;
  right: 0px;
  top: 0px;
  width: 10%;
  background-color: blue;
  display: flex;
  flex-direction: column;
  justify-content: start;
}
#nav>div {
    padding: 15px 10px;
    border: 1px solid aquamarine;
    background: yellow;
    height: 100%;
}

<div id="nav">
    <div>up</div>
    <div>down</div>
    <div>left</div>
    <div>right</div>
</div>

这就是你要找的吗？

#nav {
  position: fixed;
  height: 100%;
  left : 0px;
  right: 0px;
  top  : 0px;
  width: 10%;
  background-color: blue;
}
#nav div {
  background-color:yellow;
}

<div id="nav">
        <div>up</div>
        <div>down<div>
        <div>left</div>
        <div>right</div>
    </div>

尝试位置

：相对 #nav 和位置：绝对;宽度：100% 对于div

#nav {
  position: fixed;
  height: 100%;
  left : 0px;
  right: 0px;
  top  : 0px;
  width: 10%;
  background-color: blue;
}
#nav div {
  background-color:yellow;
  padding:10px;
  border: 1px solid black;
}

<div id="nav">
        <div>up</div>
        <div>down</div>
        <div>left</div>
        <div>right</div>
    </div>

你的问题很晦涩，但我对我发现的答案是：

#nav {
  position: fixed;
  height: 100%;
  left : 0px;
  right: 0px;
  top  : 0px;
  width: 10%;
  background-color: blue;
}
#nav div {
  background-color: red;
  box-shadow : 0 0 3px 1px #000;
  box-sizing: border-box;
  text-align : center;
}

<div id="nav">
        <div>up</div>
        <div>down<div>
        <div>left</div>
        <div>right</div>
    </div>

相关内容

最新更新

热门标签：