如何根据内容的长度限制<h1> - <h5>标签的宽度

Question

感谢您抽出宝贵时间回答我的问题.我知道,这个问题之前已经被问过并得到了解答,但不知怎的,我不能让它看起来像预期的那样.我将在下面向您展示我尝试过的一些事情.

我有一个带有圆形边界的div,我想显示一个标题(标准字幕之一).

这就是我所拥有的:

HTML:

<div id="selectModel" class="admin_dropdown">
   <h5 class="admin_caption">Wählen sie das anzuzeigende Model</h5>
   [...]
</div>

CSS:

h5.admin_caption {

        width: 300px;
        margin-top: -20px;
        margin-left: auto;
        margin-right: auto;
        background: white;

    }

我不允许发布图片(<10代表),所以我希望jsfiddle工作).

看起来如何:http://jsfiddle.net/vrP39/

我希望它看起来像:http://jsfiddle.net/vrP39/1/

正如您所看到的,最后一个小提琴的结果是通过更改width直到匹配标题来实现的.当然我想用几个不同长度的标题来使用它,所以这不是一个选项.

到目前为止我尝试过的事情:

1. <span>在我的标题中使用文本,也可以设置<span>元素的样式而不是<h5>
2. display: inline-block 要么 display: inline
3. float: left在<h5>和clear:left在下面的元件

我在stackoverflow(标题的宽度(H1,H2等))上看到了这篇文章(其中包括),但我尝试过的任何东西似乎都没有用.

我做错了什么？非常感谢任何帮助,提前感谢!

Answer 1

好像你正在尝试重现一个<fieldset>元素.那么为什么不使用那个元素呢？

<form>
    <fieldset>
        <legend>Wählen sie das anzuzeigende Model</legend>
        <select id="selectModelDDL" onchange="createTable(this);">
            <option value="1">1</option>
        </select>
    </fieldset>
</form>

随着<fieldset>您将创建元素的边框,其中<legend>是在边界上的文字.
现在您可以将文本与中心对齐:

fieldset
{
    text-align: center;
    border: 1px solid black;
    border-radius: 15px;
    font-weight: bold;
    font-size: 13px;
    padding: 10px;
}

的jsfiddle