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

问题描述 投票：1回答：5

#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>

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

html css
5个回答
0
投票

试试这个吧

#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>
0
投票

这就是你要找的东西吗？

#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>
0
投票

尝试位置：相对于#nav和位置：绝对;宽度：100％为div

0
投票

#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>
0
投票

你的问题很模糊，但我对我发现的答案是：

#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>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.