Html 如何显示文本，一条虚线，然后是跨越页面宽度的更多文本？_Html_Css

Html 如何显示文本，一条虚线，然后是跨越页面宽度的更多文本？

html css

Html 如何显示文本，一条虚线，然后是跨越页面宽度的更多文本？,html,css,Html,Css,我想在HTML页面上显示一些文本，然后是一条虚线，然后在同一行上显示更多的文本 Name: .......................................................... (Engineer) 我希望“名称”与左边框左对齐，“工程师”与右边框右对齐，然后浏览器能够用重复的点填充两者之间的间隙我已经尝试了很多不同的方法来使用CSS和HTML来实现这一点，但是还没有完全正确。我不希望必须指定每个组件的宽度（实际或百分比），以便解决方案可重复使用不同长度的字，

我想在HTML页面上显示一些文本，然后是一条虚线，然后在同一行上显示更多的文本

Name: .......................................................... (Engineer)

我希望“名称”与左边框左对齐，“工程师”与右边框右对齐，然后浏览器能够用重复的点填充两者之间的间隙

我已经尝试了很多不同的方法来使用CSS和HTML来实现这一点，但是还没有完全正确。我不希望必须指定每个组件的宽度（实际或百分比），以便解决方案可重复使用不同长度的字，例如，同一解决方案可用于：

Factory Location: .................................... (Not invoice address)

希望这个问题有意义，谢谢你的建议。

我建议，也许，

ul

是一种选择：

<ul>
    <li><span class="definition">Name:</span><span class="defined">Engineer</span></li>
    <li><span class="definition">Factory location:</span><span class="defined">not invoice address</span></li>
</ul>

编辑以更正CSS。还有HTML。哎呀

针对@Leigh（准确）的评论，编辑了以下内容：
这不符合OP的要求吗？这只是给出了一个虚线下划线（FF 3.5），而不是两段文本之间的点
我稍微调整了CSS以隐藏
span
s下的虚线边框：

ul li { border-bottom: 2px dotted #ccc; line-height: 2em; text-align: right; clear: both; margin: 0.5em 0 0 0; } span.definition { float: left; } span.defined:before { content: "("; } span.defined:after { content: ")"; } span { display: inline-block; border: 2px solid #fff; padding: 0; margin: 0 0 -2px 0; }
无可否认，这只在Chrome8、Firefox3.6、Ubuntu10.10中测试过

.
我的解决方案是使用
position:relative和位置：绝对 html <div class="row">.............................................................................................................................<span class="left">Name:</span><span class="right">(Engineer)</span></div> <div class="row">.............................................................................................................................<span class="left">Factory Location:</span><span class="right">(Not invoice address)</span></div> 示例：该行具有位置：相对和固定宽度。任何span 子项将具有位置：绝对并使用left:0 和right:0 将量程移动到正确的位置。添加背景：白色覆盖span 背景中的点 <p class="dotbg"><span>Left</span><span class="right">Right</span></p> <p class="dotbg"><span>Some text</span><span class="right">some bad text</span></p> 预览：我不想因此而受到赞扬，但我在codingforums.com上找到了一个很好的解决方案我把它弄得一团糟（虚线是用一幅图像完成的：dot.gif。如果您在阅读本文时没有看到任何虚线，则我当前使用的主机必须使该图像脱机）演示CF108909 *{边距：0；填充：0；} html{颜色：黑色；填充：2em；字体：16px/1.2“Lucida Sans”，“Lucida Sans Unicode”，“Lucida Grande”，无衬线；} html，tbody th，span{background:#f7f7ee；} 表中，caption{margin:0auto；}/*caption元素的应用程序解决了Mozilla错误297676*/ 表{边框折叠：折叠；} 标题，th，td{填充：0.1em 0；} 标题{文本对齐：居中；字体大小：粗体；} AD{显示：无；} tbody tr{背景：url（“http://www.myresult.co/images/dot.gif）0 78%重复-x；} tbody th，td+td{text align:right；} t正文{右侧填充：0.4em；字体重量：正常；} td+td{左填充：0.4em；} 引用{font-style:normal；} span{填充：0.2em；空白：pre；} Dragonseye目录章节号章名起始页码开场白 1. 1. 初秋在堡垒的聚集 4. 2. 在堡垒集合 49 3. 特尔加韦尔晚秋酒店 64 4. 泰尔加·韦尔与学院 87 5. 韦林兵营和比特拉据点 104 6. 泰尔加·韦尔，霍尔德堡 138 7. 堡堡 162 8. 泰尔加·韦尔 183 9 霍尔德堡和比特兰边界，初冬 197 10 High Reachs、Boll、Ista Weyrs；韦尔堡、特尔加堡等高地 217 11 Telgar和Benden Weyrs的审判 238 12 高地和堡垒 261 13 比特拉控股公司和特尔加韦尔公司 278 14 在霍尔德堡和特尔加韦尔转弯 300 15 登陆后的新年258；泰尔加韦尔本登控股学院 327 16 国泰航空、泰尔加威尔、比特拉控股、泰尔加 348 17 线头 379 原始来源-没有图像的简单解决方案输出：此解决方案浮动两个文本，虚线底部边框扩展到剩余宽度。以下是相关代码： HTML: 在现代浏览器中，这可以通过使用flex box显示来实现。Flex Box有一个属性，指定当元素的总大小小于容器大小时，如何在元素之间分配可用空间通过将flex grow 仅分配给产生点的元素，意味着默认情况下，剩余的全部空间将被它使用 .row {width:500px;position:relative;} .left {position:absolute;left:0;background:white;} .right {position:absolute;right:0;background:white;} <p class="dotbg"><span>Left</span><span class="right">Right</span></p> <p class="dotbg"><span>Some text</span><span class="right">some bad text</span></p> .dotbg{ line-height: 12px; background: url('http://i.stack.imgur.com/L8CQg.png') bottom repeat-x; width: 250px; /* this is only for showcase */ margin: 0 auto 1.5em auto; /* this is only for showcase */ } .dotbg span{ padding: 0 5px; background: #fff; } .dotbg .right{ float: right; } <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en-Latn-US"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Demo CF108909</title> <meta name="Author" content="Patrick Garies"> <meta name="Created" content="2007-03-03"> <meta name="Revised" content="2007-06-19"> <style type="text/css"> * { margin: 0; padding: 0; } html { color: black; padding: 2em; font: 16px/1.2 "Lucida Sans", "Lucida Sans Unicode", "Lucida Grande", sans-serif; } html, tbody th, span { background: #f7f7ee; } table, caption { margin: 0 auto; } /* Application to the caption element addresses Mozilla Bug 297676. */ table { border-collapse: collapse; } caption, th, td { padding: 0.1em 0; } caption { text-align: center; font-weight: bolder; } thead { display: none; } tbody tr { background: url("http://www.myresult.co/images/dot.gif") 0 78% repeat-x; } tbody th, td + td { text-align: right; } tbody th { padding-right: 0.4em; font-weight: normal; } td + td { padding-left: 0.4em; } cite { font-style: normal; } span { padding: 0 0.2em; white-space: pre; } </style> </head> <body> <table> <caption><cite>Dragonseye</cite> Table of Contents</caption> <col> <col> <col> <thead> <tr> <th scope="col" abbr="Chapter">Chapter Number</th> <th scope="col" abbr="Title">Chapter Title</th> <th scope="col" abbr="Page">Initial Page Number</th> </tr> </thead> <tbody> <tr> <th scope="row"></th> <td><span>Prologue</span></td> <td><span>1</span></td> </tr> <tr> <th scope="row">1</th> <td><span>Early Autumn at Fort’s Gather</span></td> <td><span>4</span></td> </tr> <tr> <th scope="row">2</th> <td><span>Gather at Fort</span></td> <td><span>49</span></td> </tr> <tr> <th scope="row">3</th> <td><span>Late Fall at Telgar Weyr</span></td> <td><span>64</span></td> </tr> <tr> <th scope="row">4</th> <td><span>Telgar Weyr and the College</span></td> <td><span>87</span></td> </tr> <tr> <th scope="row">5</th> <td><span>Weyrling Barracks and Bitra Hold</span></td> <td><span>104</span></td> </tr> <tr> <th scope="row">6</th> <td><span>Telgar Weyr, Fort Hold</span></td> <td><span>138</span></td> </tr> <tr> <th scope="row">7</th> <td><span>Fort Hold</span></td> <td><span>162</span></td> </tr> <tr> <th scope="row">8</th> <td><span>Telgar Weyr</span></td> <td><span>183</span></td> </tr> <tr> <th scope="row">9</th> <td><span>Fort Hold and Bitran Borders, Early Winter</span></td> <td><span>197</span></td> </tr> <tr> <th scope="row">10</th> <td><span>High Reaches, Boll, Ista Weyrs; High Reaches Weyr, Fort, and Telgar Holds</span></td> <td><span>217</span></td> </tr> <tr> <th scope="row">11</th> <td><span>The Trials at Telgar and Benden Weyrs</span></td> <td><span>238</span></td> </tr> <tr> <th scope="row">12</th> <td><span>High Reaches and Fort Holds</span></td> <td><span>261</span></td> </tr> <tr> <th scope="row">13</th> <td><span>Bitra Hold and Telgar Weyr</span></td> <td><span>278</span></td> </tr> <tr> <th scope="row">14</th> <td><span>Turn’s End at Fort Hold and Telgar Weyr</span></td> <td><span>300</span></td> </tr> <tr> <th scope="row">15</th> <td><span>New Year 258 After Landing; College, Benden Hold, Telgar Weyr</span></td> <td><span>327</span></td> </tr> <tr> <th scope="row">16</th> <td><span>Cathay, Telgar Weyr, Bitra Hold, Telgar</span></td> <td><span>348</span></td> </tr> <tr> <th scope="row">17</th> <td><span>Threadfall</span></td> <td><span>379</span></td> </tr> </tbody> </table> </body> </html> <div class="left">Name:</div> <div class="right">Engineer</div> <div class="dotted"></div> <div class="left">Factory location:</div> <div class="right">not invoice address</div> <div class="dotted"></div> div{ height:1em; } .left,.right{ padding:1px 0.5em; background:#fff; float:right; } .left{ float:left; clear:both; } .dotted{ border-bottom: 1px dotted grey; margin-bottom:2px; }