0

ここの私のページでは、流動的な幅のアクティブなタブに CSS の三角形を追加しましたが、それぞれに正しく配置されていません。

たとえば、About Us は OK で中央に配置されていますが、他のものは右すぎます。それleft: 23%;が原因ですが、タブの幅が流動的であるため、それぞれを中央に配置する方法がわかりません。

アクティブなタブの CSS 三角形は次のとおりです。

#middle .Advert .tabs li.active .up, #middle .Advert .tabs li.active:hover .up {
position: relative;
display: inline-block;
top: 16px;
left: 23%;
width: 0px;
height: 0px;
border-left: 5px solid rgba(0, 0, 0, 0);
border-right: 5px solid rgba(0, 0, 0, 0);
border-bottom: 5px solid #FFF;
margin-left:-10px;
}

広告タブのリスト:

#middle .Advert .tabs li {
background: #EEE;
padding: 8px 0;
float: left;
cursor: pointer;
width: 19.77%;
text-align: center;
border: 1px solid #C8CBCE;
border-left: 0;
}

さらに CSS が必要な場合はお知らせください。

4

2 に答える 2

2

解決策の 1 つは、次のようにアップを絶対に配置することです。

「position:relative;」を追加 リスト項目 (.featurestab) へ

次のような .up スタイルがあります。

position: absolute;
display: inline-block;
bottom: -1px;
left: 50%; //start of image is always at halfway - this is not enough
width: 0px;
height: 0px;
border-left: 5px solid rgba(0, 0, 0, 0);
border-right: 5px solid rgba(0, 0, 0, 0);
border-bottom: 5px solid #FFF;
margin-left: -5px; //move it half the width of the .up itself to the left making it perfectly centered

これのポイントは、常に .up を幅の半分に配置することですが、常に .up 自体の幅の半分に移動して、常に正確に中央にすることです。

于 2013-05-11T13:27:20.620 に答える
0

これは、固定位置を使用した実際の煮詰めた例です。

HTML 

<ul>
    <li>Item 1<div class="arrow"></div></li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
</ul>

CSS

.arrow{
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 5px solid white;
    width: 0px;
    height: 0px;
    position: absolute;
    left: 21px;
}

li{
  display: inline-block;
  background: black;
  color: white;
  height: 23px;
  position: relative;
  width: 50px;
  text-align: center;
}

Javascript/Jquery

$("li").click(function(){
  $(".arrow").remove();  
    $(this).append($("<div/>",{"class":"arrow"}));
});

実施例

http://jsfiddle.net/jWz75/

于 2013-05-11T13:42:25.890 に答える