css - CSS 3 如何使用动态标题构建动态边框

Question

我是 CSS 3 的新手，但是当我尝试按照我的模板设计 CSS 时，我很困惑

例如，我的模板中的标题 css 将是：

T恤-------------更多----

但是当 Title 太长时

儿童T恤-----------------------------------更多----

我的边界也会很长。我希望我的边框自动修复我的标题，这意味着当标题太长时，我的边框将用我的宽度修复。

示例我的宽度是700px;标题是从数据库加载的，我的边框宽度是550px;

当标题是

T恤-------------更多----

当标题太长时，我的边框将被修复

儿童T恤-----------------更多----

像这样

我该怎么做？

Answer 1

听起来好像您正在尝试重新实现一个<fieldset>.

Answer 2

我不确定你的 html 结构是什么样的，但试试这个......

<div id="main">
    <span class="title">Tshirt</span>
    <span class="more">more</span>
</div>

你的 CSS

#main {position: relative; border-top: 2px solid #000; width: 700px;}

.title {position: absolute; top: 0; left: 0; margin-top: -10px;}

.more {position: absolute; right: 20px; top: 0; margin-top: -10px;}

希望这会有所帮助.. 您可以通过修改“top、left、right 和“margin-top”来移动它。