0

これが私の現在のナビゲーションの画像です。

ここに画像の説明を入力

これが私が望む方法です：

ここに画像の説明を入力

私にとっての主な問題は、設定したときに何らかの理由で上に置くことができないようにul見えますborder-bottom. liこれまでの私のcssは次のとおりです。

#section-body ul.tablenavigation {
  font-family: "Helvetica Neue",Helvetica Neue,Helvetica,Arial,sans-serif;
  list-style-type: none;
  position: relative;
  text-align: left;
  font-size: 19.4px;
  margin: 0px;
  padding: 0px 20px 0px 3px;
  color:#6a6a6a;
  background-color:#f4f4f4;
  border-bottom: 1px solid #ddd;
  width: 1825px;
}

#section-body ul.tablenavigation li {
  display: inline-block;
  padding: 20px 25px 20px 25px;
  margin: 0px 0px 0px -5px;
  border-right: 1px solid #fff;
}

#section-body ul.tablenavigation li a{
 color:#6a6a6a;
}

#section-body ul.tablenavigation li a:hover{
 color:#969696;
}

#section-body ul.tablenavigation li.active {
  color:#d4c58b;
  background-color: #fff;
  border-right: 1px solid #ddd;
  border-left: 1px solid #ddd;
}

HTML :

<ul class="tablenavigation cps-tablenavigation">
                            <li><a href="#">DELIVERY</a></li>
                            <li><a href="#">ITEMS</a></li>
                            <li class="active"><a href="#">BILLING</a></li>
                            <li><a href="#">PERFORMANCE</a></li>
</ul>

この境界線を目にBILLING見えないようにするか、何らかの方法でこの白い背景を境界線の上に置くにはどうすればよいですか。

4

2 に答える 2

1

ここにCSSがあります

#section-body ul.tablenavigation li.active {
    color:#d4c58b;
    background-color: #fff;
    border-right: 1px solid #ddd;
    border-left: 1px solid #ddd;
    top:1px;
    position: relative;
}

そしてここにフィドルがあります

于 2013-05-23T20:57:47.713 に答える
1

下の境界線をリスト項目に個別に適用することはできないため、box-shadowプロパティの垂直オフセット値を使用して、3 番目のリスト項目の赤い下の境界線に重なるように白の色を指定できます。

.tablenavigation li {
display: inline-block;
}

.tablenavigation li.active {
display: inline-block; 
box-shadow: 0 01px white;
}

jsフィドル

于 2013-05-23T20:57:54.667 に答える