HTML/CSS "right" 方式的不确定长度和行的文本

Question

我正在使用 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> 样式？

Answer 1

一个潜在的解决方案可能是为您的标题提供 display:block 和 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;
}

Answer 2

我见过这个设计元素弹出几次，我见过的最好的方法（这绝不是一个完美的方法）是使用隐藏在容器上的溢出，浮动标题（或使其成为 inline-block），并设置绝对定位行元素的 left 属性（最好是 pseudo-element 以保持标记干净）。实际上你得到这个：

/* 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，但与旧版浏览器存在一些兼容性问题。

Demo 供您试用：http://jsfiddle.net/uru17kox/

编辑：哦！这是我第一次看到这个方法的地方，以防你想要一个不同的旋转。 https://css-tricks.com/line-on-sides-headers/

HTML/CSS "right" 方式的不确定长度和行的文本

text of indeterminate length and line in HTML/CSS the "right" way

html

css

zurb-foundation