css - 如何根据内容的长度限制

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 rep)，所以我希望 jsfiddle 能正常工作。

它的样子:http://jsfiddle.net/vrP39/

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

如你所见，最后一个 fiddle 的结果是通过改变width来实现的。直到它匹配标题。当然，我想将它与多个不同长度的字幕一起使用，所以这不是一个选项。

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

1. 使用 <span>在我的标题中的文本周围，还设置了 <span> 的样式元素而不是 <h5>
2. display: inline-block或 display: inline
3. float: left在<h5>和 clear:left在以下元素中

我在 stackoverflow ( Width of Headers (H1, H2 etc) ) 上看到这篇文章(以及其他文章)，但我尝试过的任何东西似乎都不起作用。

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

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