在页面中心div创建类下面的随机像素

Question

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

我希望它以页面为中心，并使用带有硬编码380px的margin auto。我敢肯定硬编码的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>

Answer 1

你为什么使用

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

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

添加

.wizard a { height: 18px; }

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