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

Question

好吧，这对你们前端的人来说应该很容易。我已经准备好样式化的紫色链接。我只是很难让垂直线看起来不错。假设这条线是1px #000 solid

我有点让它工作，制作一个divw/abottom-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 中使用 :before 选择器，但我不确定在 < ie7 中是否兼容

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