0

在我的页面上，我已将 CSS 三角形添加到流体宽度活动选项卡中，但它们在每个选项卡中都没有正确对齐。

例如，关于我们的一个很好并且居中对齐，但其他的太靠右了。这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

解决方案之一可能是绝对定位 ups，如下所示：

添加“位置：相对；” 到列表项（.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 回答