HTML/CSS 中不确定长度和行的文本“正确"；道路 [英] text of indeterminate length and line in HTML/CSS the "right" way
问题描述
我使用 Zurb Foundation 进行页面布局.我页面上的一行需要有一些文本，然后是一条填充其余宽度的行，如下所示:
<代码>|不确定长度的文本-------------------------------------- |
我有使用 和
我意识到使用 所以我的问题是:没有 我已经看到这个设计元素弹出了几次，并且是我见过它完成的最好的方式(这绝不是一个完美的方式) 是使用隐藏在容器上的溢出，浮动标题(或使其成为 它唯一的主要问题是 演示供您试用:http://jsfiddle.net/uru17kox/ 哦！这是我第一次看到这种方法的地方，如果你想对它进行不同的旋转.https://css-tricks.com/line-on-sides-headers/ I am using Zurb Foundation for page layout. A row on my page needs have some text and then a line that fills the rest of the width, like so: I have the desired layout working with I realize that the use of So my question is this: is there a straightforward way to do this without I've seen this design element pop up a few times, and the best way that I've seen it done (which is by no means a perfect way) is to use overflow hidden on a container, float the heading (or make it
The only major problem with it is the Demo for you to play around with it: http://jsfiddle.net/uru17kox/ Edit: Oh! and here's where I first saw this method illustrated in case you want a different spin on it. https://css-tricks.com/line-on-sides-headers/ 这篇关于HTML/CSS 中不确定长度和行的文本“正确"；道路的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！ 进行布局和使用
和 来获得相同的布局，但不能'不要想出任何不需要过度使用 Javascript 的简单明了的东西.最重要的是，大多数推荐的解决方案建议使用像 border_bottom 这样的东西，它不会像 <hr> 那样在中间给我一条漂亮的线. 或
样式?inline-block)，并设置绝对定位的行元素的 left 属性(最好是一个伪元素，以保持您的标记干净).实际上你得到了这个:/* 使演示更漂亮的东西 */桌子 {边框:1px纯红色；}表:之前{内容:'糟糕的方式';红色;显示:块；}.good-ish-way {边框:1px纯绿色；边距顶部:1em；}.good-ish-way:before {内容:'好的方式';颜色:绿色；显示:块；}/* 真正有用的东西.*/.good-ish-way {溢出:隐藏；}.good-ish-way h3 {位置:相对；显示:内联块；}.good-ish-way h3:after {内容: '';宽度:100%；位置:绝对；左:100%；高度:1px；背景:#777；宽度:1000%；顶部:0；底部:0；边距:自动 0 自动 0.3em；}<tr><td style="white-space:nowrap;padding:0;"><h3>不确定长度的文本</h3></td><td style="width:100%;"><hr/></td></tr>
<div class="good-ish-way"><h3>不确定长度的文本</h3>1000% 部分.我见过其他开发人员使用大像素值，但问题是，你永远不会知道这是否足够.您可以使用 100vw，但是旧浏览器存在一些兼容性问题.| Text of Indeterminate Length -------------------------------------- |<table> and <hr> tags:<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> for layout and <hr> for drawing lines are both generally frowned upon in modern web design. I spent a while trying to get the same layout using <div>, <span>, and <p> and couldn't come up with anything simple and straightforward that didn't require what seemed like an excessive use of Javascript. On top of that, most recommended solutions suggest using things like border_bottom which doesn't give me a nice line in the middle like <hr> does.<table> or <hr>? Perhaps with some sort of a custom <span> style?inline-block), and set the left attribute of your absolutely positioned line element (preferably a pseudo-element so as to keep your markup clean). In effect you get this:/* 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% part. I've seen other devs use a large pixel value, but the thing is, you'll never know if it's enough. You could use 100vw, but then there are some compatibility issues with older browsers.
登录
关闭
