CSS: как сделать горизонтальную линию?

Question

[Евгений Конкин]

Привет всем!
Суть вопроса — как сделать горизонтальную линию, как на скриншоте? Никак не получается сверстать ее! Помогите! Подскажите!

Вот так пытаюсь:


—

—

Comments

[Евгений Конкин]

Вот

Answer 1

[Денис Инешин]

Примерно так можно: jsfiddle.net/IonDen/d0LrsdL6

<div class="line">
    <div class="cont">Йо, какой-то блок</div>
    <div class="cont-line"><div></div></div>
    <div class="cont">Йо, какой-то блок</div>
</div>

.line {
    display: table;
    width: 100%;
}
.cont {
    vertical-align: middle;
    display: table-cell;
    white-space: nowrap;
    width: 1%;
}
.cont-line {
    vertical-align: middle;
    display: table-cell;
    padding: 0 10px;
}
.cont-line div {
    height: 2px;
    background: #000;
}

Comments

[Евгений Конкин]

Ща попробую у себя! ))

[Евгений Конкин]

Все отлично работает! )))) Спасибо большое!

[RusticAnd]

display: table; ахахахах.... ясн, программирование это не твое

[Денис Инешин]

RusticAnd, лол, ты бы еще лет через 10 этот пост откапал))

[RusticAnd]

Денис Инешин, 3 года назад были табличные сайты?))))ммм, интересный факт от "лучших программистов" в мире...

[Денис Инешин]

RusticAnd, ну давай разберём)
- БОЛЕЕ 3 лет назад - значит более 3 лет, тут нет других цифр, это могло быть и 9 лет назад
- Как связан `display: table` и древние табличные сайты?)
- Причём тут программирование?

Answer 2

[Damir Aushenov]

сверху вариант посимпатичнее
вот вам еще один через inline-block
jsfiddle.net/yespeace/1dj9wczc

<div class="cinema">
    <div class="cinema__text">Скоро в кино</div>
    <div class="cinema__line"></div>
    <div class="cinema__button"><button>Смотреть все</button></div>
</div>

.cinema {
	width: 1000px;
    margin: 0 auto;
	
}
.cinema__line {
	background-color:#263238;
	width: 400px;
	display: inline-block;
	height:1px;
	vertical-align: middle;
	
}
.cinema__button {
	display: inline-block;
	width: 100px;
}
.cinema__text {
	display: inline-block;
	width:100px;
}

Comments

[Евгений Конкин]

Спасибо!