如何在他们的位置保持标签？

Question

这是我的代码：

＆＃13;

＆＃13;

curl 'http://localhost:8081/nexus/service/extdirect' -H 'Content-Type: application/json' -H 'Accept: */*' --data-binary '{"action":"coreui_Component","method":"readAssets","data":[{"page":1,"start":0,"limit":300,"sort":[{"property":"name","direction":"ASC"}],"filter":[{"property":"repositoryName","value":"repo_raw"}]}],"type":"rpc","tid":15}' --compressed

＆＃13;

.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;
}

＆＃13;

＆＃13;

＆＃13;

如您所见，不活动的标签悬停会略微改变其位置。我怎样才能让他们永远坚持下去？

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>

Answer 2

添加边框会导致： 除非您确实需要，否则请删除以下内容。

border: 1px solid rgba(228,230,232,0.25);
border-top: 3px solid rgba(228,230,232,0.25);

Answer 3

从border: 1px solid rgba(228,230,232,0.25);

中删除.sort_box_items a:hover

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