html - 位置 :relative started working different than at first (asp. 净)

Question

我在玩代码，测试东西..一切正常，但在我刷新页面后，一切都开始“奇怪”了

这是 admin.aspx 中的代码:

<div id="LeftCenterPanel">
    <a href="#" id="Dashb" class="TableButtons">Dashboard</a>
    <a href="#" id="Doct" class="TableButtons">Doctors</a>
</div>

以及那些的CSS代码:

#LeftCenterPanel {
    position: absolute;
    top: 120px;
    left: 0;
    width: 260px;
}

.TableButtons {
   position: relative;
   top: 0;
   left:0;

   width: 100%;

   border-bottom: 1px solid #373e4a;
   text-decoration: none;     
}
    .TableButtons:hover{
        background-color: #373e4a;
       transition: all 0.5s ease 0s;
    }

一开始。仪表板和医生按钮位于彼此下方，最大宽度。现在它们彼此相邻，文本的最大宽度..即使我将宽度更改为 200px，它仍然保持不变

Answer 1

你可以尝试 float:left 标签

#LeftCenterPanel {
    position: absolute;
    top: 120px;
    left: 0;
    width: 260px;
}

.TableButtons {
   position: relative;
   top: 0;
   left:0;
   float:left;
   width: 100%;

   border-bottom: 1px solid #373e4a;
   text-decoration: none;     
}
    .TableButtons:hover{
        background-color: #373e4a;
       transition: all 0.5s ease 0s;
    }

<div id="LeftCenterPanel">
    <a href="#" id="Dashb" class="TableButtons">Dashboard</a>
    <a href="#" id="Doct" class="TableButtons">Doctors</a>
</div>