Question

我有一个侧边栏和链接。边栏在页面下方降低了91px，但是链接不会立即显示为91px，而是有更多空间-也许100px或更多，直到出现第一个链接。我不明白为什么会这样。我希望链接位于侧边栏的顶部，以便第一个“折叠”文本位于灰色开始的位置。

这是codepen：https://codepen.io/anon/pen/BMjYjo

html ：

<div id="mySidenav" class="sidenav">

  <div class="navContent2">

    <a id="collapse-link" data-toggle="sidebar-collapse-button">
      <img class="sidebar-img" id = "collapse-img" src="${pageContext.request.contextPath}/imgs/main/sidebar/collapse.png"/>
       <span class="sidebar-text">Collapse</span>
     </a>

     <a data-img-name="home.png" href="${pageContext.request.contextPath}">
        <img class="sidebar-img" src="${pageContext.request.contextPath}/imgs/main/sidebar/home.png"/>
        <span style="right: 0px;" class="sidebar-text">Home</span>
      </a>

      <a data-img-name="User.png" href="${pageContext.request.contextPath}">
        <img class="sidebar-img" src="${pageContext.request.contextPath}/imgs/main/sidebar/Link1.png"/>
        <span style="right: 0px;" class="sidebar-text">Link1</span>
       </a>

       <a data-img-name="" href="#">
         <img class="sidebar-img" src="${pageContext.request.contextPath}/imgs/main/sidebar/Link2.png"/>
         <span style="right: 0px;" class="sidebar-text">Link2</span>
        </a>

        <a data-img-name="" href="#">
          <img class="sidebar-img" src="${pageContext.request.contextPath}/imgs/main/sidebar/Link3.png"/>
          <span style="right: 0px;" class="sidebar-text">Link3</span>
        </a>

        <a data-img-name="" href="#">
          <img class="sidebar-img" src="${pageContext.request.contextPath}/imgs/main/sidebar/Link4.png"/>
          <span style="right: 0px;" class="sidebar-text">Link4</span>
        </a>

    </div>
</div>

css：

:root  {

    --sidebar-background-color: #404040;    
    --sidebar-active-text-background-color: #ff1a1a;
    --sidebar-inactive-text-background-color: red;
    --sidebar-active-text-color: #f2f2f2;
    --sidebar-inactive-text-color: #e2e2e2; 
    --sidebar-top: 91px;

}

/*SIDEBAR*/

.navContent {
  width: 180px;
}

#mySidenav  {
    width: 180px;
    overflow-x: hidden;
}


.sidebar-img  {
    padding: 0px;
    padding-top: 8px;
    padding-bottom: 8px;

    left: 0px;

    width: 22px;
}

.sidenav a, #collapse-link {
        padding: 8px 8px 8px 16px;
        text-decoration: none;
        font-size: 13px;
        color: var(--sidebar-inactive-text-color);
        display: block;
        transition: 0.3s;

}

.sidenav a:hover {
        color: var(--sidebar-active-text-color);
        background-color: var(--sidebar-active-text-background-color);
}


a.collapsed  {


}

#collapse-link  {
    cursor: pointer; 
}

.sidebar-text  {
    right: 0px !important;
}


.sidenav   {
    display: inline-block; /* fixes that spacing issue */
    background-color:  var(--sidebar-background-color) !important;


}

.sidebar-img + .sidebar-text  {
    margin-left: 20px;


}


.sidenav {
    margin-top: var(--sidebar-top); 

        height: 100%;
        width: 0;
        position: fixed;
        z-index: 1;
        top: 0;
        left: 0;
        background-color: #111;
        overflow-x: hidden;
        transition: 0.2s;
        padding-top: var(--sidebar-top);
}

.sidenav .closebtn {
        position: absolute;
        top: 0;
        right: 13px;
        font-size: 18px;
        margin-left: 25px;
}

#main {
        transition: margin-left .2s;
        padding: 8px;
}

@media screen and (max-height: 225px) {
    .sidenav {padding-top: 8px;}
    .sidenav a {font-size: 9px;}
}


/*END SIDEBAR*/

Answer 1

如果从padding-top: var(--sidebar-top);中删除.sidenav，可能会得到想要的结果。

.sidenav {
    margin-top: var(--sidebar-top); 

        height: 100%;
        width: 0;
        position: fixed;
        z-index: 1;
        top: 0;
        left: 0;
        background-color: #111;
        overflow-x: hidden;
        transition: 0.2s;
}

叉形笔：https://codepen.io/brooksrelyt/pen/xMZYzM

侧栏中的嵌套div：文本太低，页边距大：codepen内部

1 个答案: