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

Question

好的，这对你们这些前端人员来说应该很容易。我已经准备好了样式化的紫色链接。我只是无法让垂直线看起来正常。假设直线是 1px #000 solid

我有点让它工作，制作一个带有 bottom-border 的 div 并将样式化的链接 float 到右侧。如果我这样做，我似乎无法在分隔线和链接之间留出空间。

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. 您不需要指定按钮的宽度