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

Question

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

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

  

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

但是当标题太长时

  

T恤for Kid ----------------------------------更多----

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

示例我的宽度是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“来移动它。