3

我不是 css 专家，但我找到了一个我喜欢的进度跟踪器，但需要它以页面为中心。但是每当我将它居中时，我会在前两个箭头的底部得到一个随机像素：（见截图）

我希望它以页面为中心，并使用硬编码 380 像素的自动边距。我确信硬编码的 380px 应该不是硬编码的，但“自动”做了同样的事情。

前两个箭头的像素向下

CSS：

div#wizard.wizard
    {
        width: 380px;
        margin-left:auto;
        margin-right:auto;
    }

.wizard a 
    {
        padding: 12px 12px 10px 12px;
        margin-right:5px;
        background:#efefef;
        position:relative;
        display:inline-block;
    }
.wizard a:before
    {
        width:0px;
        height:0px;
        border-top: 20px inset transparent;
        border-bottom: 20px inset transparent;
        border-left: 20px solid #fff;
        position: absolute;
        content: "";
        top: 0; 
        left: 0;
    }
.wizard a:after
    {
        width:0px;
        height:0px;
        border-top: 20px inset transparent;
        border-bottom: 20px inset transparent;
        border-left: 20px solid #efefef;
        position: absolute;
        content: "";
        top: 0;
        right: -20px;
        z-index:2;
    }
.wizard a:first-child:before {border:none;}
.wizard a:last-child:after {border:none;}

.wizard a:first-child
    {
        -moz-border-radius: 4px 0 0 4px;
        -webkit-border-radius: 4px 0 0 4px;
        border-radius:   4px 0 0 4px;
    }
.wizard a:last-child
    {
        -moz-border-radius: 0 4px 4px 0;
        -webkit-border-radius: 0 4px 4px 0;
        border-radius: 0 4px 4px 0;
    }

.wizard .badge {margin:0 5px 0 18px; position:relative; top:-1px;}
.wizard a:first-child .badge {margin-left:0;}

.wizard .current {background:#007ACC; color:#fff;}
.wizard .current:after {border-left-color:#007ACC;}

调用页面：

 <div class="wizard" id="wizard">
    <a class="current"><span class="badge badge-inverse">1</span> Your Information</a>
    <a><span class="badge">2</span> Preview</a>
    <a><span class="badge">3</span> Your Copy</a>
</div>
4

1 回答 1

1

你为什么使用

.wizard .badge { ... top: -1px; }

也许这就是为什么它看起来好像有额外的像素的原因。如果将其设置为零会发生什么？

添加

.wizard a { height: 18px; }

因为您没有指定确切的高度，虽然两个边框的高度加起来为 40 像素，但按钮的高度可能仍然不同。这解决了你的问题吗？

于 2013-08-19T00:04:08.643 回答