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

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

一个潜在的解决方案是给你的标题一个背景样式,显示:块和宽度: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;
}