Question

css

.bottomdotline{
border-bottom-style: dotted;
border-bottom-width:2px;
display:table-cell;
width:100%;
}

HTML

<td >Name: <span class="bottomline"> <? echo $name; ?></span></td>
<td ></td>

如何在文本后面制作底部边框，如果我使用下一行则会受到宽度的影响。 fyi：php值将显示在边框

上

我的目标：

名称：__________________

我在How to underline blank space in CSS?

找到了类似的帖子和答案

但我想使用课程

Answer 1

问题是span没有width。最简单的解决方案就是让它拥有 display:inline-block 和min-width

Answer 2

添加css：

.bottomline:after{
  content: " ";
  border-bottom-style: dotted;
  border-bottom-width:2px;
  display:table-cell;
  width:200px;
}

这是实例http://jsfiddle.net/aghd7/

Answer 3

这是另一个解决方案。

<div class="container">
  <h1 class="offset-border">Hello World</h1>
</div>

和CSS。

.container{
  overflow:hidden;
}
.offset-border{
  display: inline-block;
  padding-right: 10px;
  position: relative;
}
.offset-border::after{
    background: #000 none repeat scroll 0 0;
    bottom: 6px;
    content: "";
    display: inline-block;
    height: 1px;
    left: 100%;
    position: absolute;
    width: 5000px;
    z-index: -1;
}

Answer 4

使用下面的代码....与示例相同。

ul {
    display: inline-block;
}
li {
    display: inline-block;
    margin-right: 10px;
    position: relative;
}
.underline:after {
    border-bottom: 2px solid #000;
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    width: 50%;
    bottom: 0;
    margin: 0 auto;
}

<ul>
    <li class="underline">Lesson Planner</li>
    <li>Two</li>
    <li>Three</li>
</ul>

文本后的CSS边框底部

4 个答案: