css - 如何通过内容的长度限制<h1>-<h5>标签的宽度

感谢您抽出宝贵的时间回答我的问题。
我知道，这个问题以前曾被问过和回答过，但是不知何故我无法使它看起来像预期的那样。下面，我将向您展示一些我尝试过的事情。

我有一个带圆 Angular 寄宿生的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;

    }

我不允许张贴图片(
看起来如何:http://jsfiddle.net/vrP39/

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

如您所见，最后的 fiddle 的结果是通过更改width直到与标题匹配来实现的。当然，我想将其与具有不同长度的多个字幕一起使用，因此这不是一个选择。

到目前为止，我已经尝试过:

在我的标题中的文本周围使用<span>，还设置<span>元素的样式，而不是<h5>

display: inline-block或display: inline

以下元素中的float: left中的

<h5>和clear:left
我在stackoverflow(Width of Headers (H1, H2 etc))上看到了这篇文章(以及其他文章)，但是我尝试过的任何事情似乎都没有效果。

我做错了什么？非常感谢您的任何帮助，在此先感谢您!

最佳答案

似乎您正在尝试重现 <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

关于css - 如何通过内容的长度限制<h1>-<h5>标签的宽度，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/20219673/