将分隔线垂直居中到样式化链接图像的左侧

Question

好吧，对于前端那些人来说，这个应该很容易。我有风格的紫色链接都准备好了。我只是让垂直线看起来不错。假设该行为1px #000 solid

我很友好地制作div w / a bottom-border并将样式链接浮动到右边。如果我这样做，我似乎无法在分隔线和链接之间找到空间。

Answer 1

以下涉及一些额外的标记并使用表格单元格。

<强> HTML：

<div class="wrapper">
    <span class="leader">
        <b></b>
    </span>
    <span class="cell">
    <button>Sample Button</button>
    </span>
</div>

<强> CSS：

.wrapper {
    border: 1px dotted gray;
    display: table;
    width: 100%;
}
.wrapper .leader, .wrapper .cell {
    display: table-cell;
    vertical-align: middle;
}
.wrapper .leader {
    width: 100%;
    padding: 0 10px;
}
.wrapper .leader b {
    display: block;
    border-bottom: 1px solid red;
}
.wrapper button {
    white-space: nowrap;
}

演示于：http://jsfiddle.net/audetwebdesign/8aSBA/

这种方法有一些优点：

1. 您可以控制水平线左右两侧的间距

2. 垂直对齐独立于font-size，line-height

3. 您无需指定按钮的width

Answer 2

你可以在css中使用a before选择器，虽然我不确定在＆lt;中是否兼容IE7

    .button:before { 
        background: none repeat scroll 0 0 #000000;
        content: "";
        float: left;
        height: 1px;
        margin-top: 12px;
        width: 59%;
    }