如何在文本后结束虚线边框而不是在正确的方向上延伸整个页面？

Question

Dashed border (screenshot and preferred ending point)

如您所见，边框向页面末尾延伸，而我希望它在文本结束后立即结束......（几乎）。有没有具体的方法来做到这一点？ p.s。我希望它只对这个 ONE 标题是这样，而不是其他任何标题。

这是我的代码：

<h1 style="border-style:dashed;border-left-width:2px;border-right-width:2px;border-width:2px;border-color:black;"><b><u>Current Projects (in order of importance):</b></u></h1>
<p><ol>
 <li>Apartment Life Redux</li>
 <li>Sharpshooter Infinite</li>
</ol></p>

Answer 1

我创建了一个代码片段来帮助您解决问题。

我添加了 display: inline-block 然后它就在您的文本之后结束了。

像这样：

.dashed-border {
  border-style:dashed;
  border-left-width:2px;
  border-right-width:2px;
  border-width:2px;
  border-color:black;
  display:inline;
}

<h1 class="dashed-border"><b><u>Current Projects (in order of importance):</b></u></h1>
<p><ol>
 <li>Apartment Life Redux</li>
 <li>Sharpshooter Infinite</li>
</ol></p>

Answer 2

你只需要添加 display:inline; 其他的就可以了。

<h1 style="border-style:dashed;border-left-width:2px;border-right-width:2px;border-width:2px;border-color:black; display:inline;"><b><u>Current Projects (in order of importance):</b></u></h1>
<p><ol>
 <li>Apartment Life Redux</li>
 <li>Sharpshooter Infinite</li>
</ol></p>

如果您只想为特定元素设置属性，您可以使用元素 ID，例如。

<div id="foo"><div> //this is in your html
#foo{display:inline;//other styles} //this is part of your css file

希望对您有所帮助

如何在文本后结束虚线边框而不是在正确的方向上延伸整个页面？

How to end a dashed border after text instead of extending across the page in the right direction?

html

css

border