Текст неопределенной длины и строка в HTML/CSS "правильным" способом

Я использую Zurb Foundation для верстки страниц. В строке на моей странице должен быть какой-то текст, а затем строка, которая заполняет остальную часть ширины, вот так:

| Text of Indeterminate Length -------------------------------------- |

У меня есть нужный макет, работающий с <table> а также <hr> теги:

<div class="row">
  <div class="large-12 columns">
    <table style="width:auto;border-collapse:collapse;border:0;padding:0;margin:0;">
      <tr>
        <td style="white-space:nowrap;padding:0;">
          <h3>Text of Indeterminate Length</h3>
        </td>
        <td style="width:100%;"><hr/></td>
      </tr>
    </table>
  </div>  
</div>

Я понимаю, что использование <table> для макета и <hr> для рисования линий, как правило, не одобряются в современном веб-дизайне. Я потратил некоторое время, пытаясь получить тот же макет, используя <div>, <span>, а также <p> и не мог придумать ничего простого и понятного, что не требовало бы чрезмерного использования Javascript. Кроме того, большинство рекомендуемых решений предлагают использовать такие вещи, как border_bottom который не дает мне хорошую линию в середине, как <hr> делает.

Итак, мой вопрос заключается в следующем: есть ли простой способ сделать это без <table> или же <hr>? Возможно, с каким-то обычаем <span> стиль?

Источник

2 ответа

Решение

Я видел, как этот элемент дизайна появлялся несколько раз, и лучший способ, которым я видел его (что ни в коем случае не является идеальным способом), - это использовать переполнение, скрытое в контейнере, плавать заголовок (или сделать его inline-block) и установите left Атрибут вашего абсолютно позиционированного линейного элемента (предпочтительно псевдоэлемента, чтобы сохранить чистоту разметки). По сути вы получаете это:

/* stuff to make the demo pretty */

table {
    border: 1px solid red;
}

table:before {
    content: 'bad way';
    color: red;
    display: block;
}

.good-ish-way {
    border: 1px solid green;
    margin-top: 1em;
}

.good-ish-way:before {
    content: 'good-ish way';
    color: green;
    display: block;
}



/* the actually useful stuff. */

.good-ish-way {
    overflow: hidden;
}

.good-ish-way h3 {
    position: relative;
    display:inline-block;
}

.good-ish-way h3:after {
    content: '';
    width: 100%;
    position: absolute;
    left: 100%;
    height: 1px;
    background: #777;
    width: 1000%;
    top: 0;
    bottom: 0;
    margin: auto 0 auto 0.3em;
}
<table>
    <tr>
        <td style="white-space:nowrap;padding:0;">
            <h3>Text of Indeterminate Length</h3>
        </td>
        <td style="width:100%;"><hr/></td>
    </tr>
</table>

<div class="good-ish-way">
    <h3>Text of Indeterminate Length</h3>
</div>

Единственная серьезная проблема с этим 1000% часть. Я видел, как другие разработчики используют большое значение пикселя, но дело в том, что вы никогда не узнаете, достаточно ли этого. Вы могли бы использовать 100vw, но есть некоторые проблемы совместимости со старыми браузерами.

Демо для вас, чтобы поиграть с ним: http://jsfiddle.net/uru17kox/

Редактировать: О! и вот где я впервые увидел этот метод, показанный на случай, если вы захотите по-другому взглянуть на него. https://css-tricks.com/line-on-sides-headers/

Источник

Потенциальным решением может быть придание заголовку стиля фона с display:block and width:100% и текста с белым фоном, чтобы скрыть строку от заголовка, содержащего заголовок? http://jsfiddle.net/9o74jbLh/

<h3><span>{% block hightide_pagename %}{% endblock hightide_pagename %}
    </span></h3>

h3 {
    display:block;
    position:relative;
    width:100%;
}
h3:after {
    content:"";
    height:1px;
    width:100%;
    background: #000;
    position:absolute;
    top:50%;
}
h3 span {
    background:#fff;
}
Источник
Другие вопросы по тегам