Вертикально отцентрируйте разделительную линию слева от стилизованного изображения ссылки

Question

Вертикально отцентрируйте разделительную линию слева от стилизованного изображения ссылки

0

Хорошо, это должно быть довольно легко для вас, передние парни. У меня есть стилизованная фиолетовая связь. У меня просто возникают проблемы с тем, чтобы вертикальная линия выглядела нормально. Предположим, что линия 1px #000 solid

Я вроде как работал над созданием div с bottom-border и плавающей ссылкой в стиле справа. Если я это сделаю, я не могу найти место между разделительной линией и ссылкой.

SBerg413 03 окт. 2013, в 17:17

Источник

0

Можем ли мы увидеть код в JSFiddle?
Paulie_D 03 окт. 2013, в 15:06

Теги:

html

css

frontend

2 ответа

1

Вы можете использовать: перед селектором в css, хотя я не уверен, совместим в <ie7

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

tjnewton 03 окт. 2013, в 12:39

Ещё вопросы

Marc Audet · Accepted Answer · 2013-10-03T14-31-00.000Z

Ниже приведена дополнительная надстройка и использует таблицы-ячейки.

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/

Для этого подхода есть несколько преимуществ:

Вы можете управлять расстоянием слева и справа от горизонтальной линии
Вертикальное выравнивание не зависит от font-size, line-height
Вам не нужно указывать width кнопки

Хорошо - спасибо за jsFiddle. На самом деле он работал сам с гораздо менее красноречивым решением, ОЧЕНЬ специфичным для этой страницы. Но это здорово. Я собираюсь изменить свой код, чтобы использовать его, чтобы я запомнил его для дальнейшего использования. Еще раз спасибо.