javascript - 我怎样才能让标签固定在他们的位置？

Question

这是我的代码:

.sort_box{
    padding: 25px 0px;
    direction: rtl;
    font-family: BYekan,'BYekan', Tahoma;
    line-height: 20px;
}
.sort_box_title{
    font-size: 20px;
    width: 150px;
    float: right;
    margin-right: 5px;
    margin-top: 10px;
}
.sort_box_items{
    width: 100%;
    border-bottom: 1px solid #ccc;
    direction: ltr;
}
.sort_box_items a{
    display: inline-block;
    font-size: 14px;
    padding: 10px 20px;
    
}
.sort_box_items a:hover{
    text-decoration: none;
    background-color: rgba(132,141,149,0.05);
    border: 1px solid rgba(228,230,232,0.25);
    border-top: 3px solid rgba(228,230,232,0.25);
    color: black;
}
.sort_box_items .sort_active{
    border-top: 3px solid orange;
    border-right: 1px solid #ccc;
    border-left: 1px solid #ccc;
    border-bottom: 1px solid #fff;
    margin-bottom: -1px;
}

.sort_box_items .sort_active:hover {
	background-color: white;
	border-top: 3px solid #f48024;
    border-right: 1px solid #ccc;
    border-left: 1px solid #ccc;
    border-bottom: 1px solid #fff;
    margin-bottom: -1px;
}

a{
  color: gray;
  text-decoration: none;
}

<div class="sort_box">
    <span class="sort_box_title active">لیست سوالات</span>
    <div class="sort_box_items">
        <a href="?o=newest">جدیدترین</a>
        <a href="?o=newest">جدیدترین</a>
        <a class="sort_active" href="?o=newest">جدیدترین</a>
    </div>
</div>

如您所见，悬停不活动的选项卡会稍微改变它们的位置。我怎样才能让他们永远修复？

Answer 1

您也应该将边框应用于非事件标签。您可以匹配背景颜色或使它们透明。这样元素的高度就不会发生变化。

我已将以下行添加到 .sort_box_items a。

border: 1px solid transparent;
border-top-width: 3px;

从这里开始就是调整边框的颜色，不需要重新声明宽度和样式。

.sort_box {
  padding: 25px 0px;
  direction: rtl;
  font-family: BYekan, 'BYekan', Tahoma;
  line-height: 20px;
}

.sort_box_title {
  font-size: 20px;
  width: 150px;
  float: right;
  margin-right: 5px;
  margin-top: 10px;
}

.sort_box_items {
  width: 100%;
  border-bottom: 1px solid #ccc;
  direction: ltr;
}

.sort_box_items a {
  display: inline-block;
  margin-bottom: -1px;
  font-size: 14px;
  padding: 10px 20px;
  border: 1px solid transparent;
  border-top-width: 3px;
}

.sort_box_items a:hover {
  color: black;
  text-decoration: none;
  background-color: rgba(132, 141, 149, 0.05);
  border-color: rgba(228, 230, 232, 0.25);
}

.sort_box_items .sort_active {
  border-color: #ccc;
  border-top-color: orange;
  border-bottom-color: white;
}

.sort_box_items .sort_active:hover {
  background-color: white;
  border-color: #ccc;
  border-top-color: #f48024;
  border-bottom-color: white;
}

a {
  color: gray;
  text-decoration: none;
}

<div class="sort_box">
  <span class="sort_box_title active">لیست سوالات</span>
  <div class="sort_box_items">
    <a href="?o=newest">جدیدترین</a>
    <a href="?o=newest">جدیدترین</a>
    <a class="sort_active" href="?o=newest">جدیدترین</a>
  </div>
</div>