html - 给 parent 与 child 相同的宽度

Question

(注意:出于兼容性原因，我可能只使用 HTML 和 CSS。)

我有一个 div 包含一个 h4 标签。最终发生的是我的 h4 标签有一个基于包含多少文本的自动定义的宽度。但是，当我将它包含在我的 div 标签下时，div 会自动使用 width:100% 而不是像我希望的那样包围标签。这成为一个问题，因为当我通过 hover 更改 div 的颜色时，我看到了大量额外的未填充空间。

这是我遇到的问题的一个示例:

<a href='./HH.html'>
<div id='homenav'>
    <h4>
        HH
    </h4>
</div>
</a>

这是我当前的 CSS:

h4{padding:0px;Margin:5px;}
#homenav
{
   font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
   background: #e8edff;
   color: #669;
   text-align:center;
   vertical-align: middle;
   display:-webkit-box;
   -webkit-box-pack:left;
   -webkit-box-align:left;
   display:-moz-box;
   -moz-box-pack:left;
   -moz-box-align:left;
   border-radius: 5px;
   padding: 2px;
   width:auto;  
}

#homenav:hover
{
   background:#D0DAFD;
   color:#333399;
}

Answer 1

可以在父div中添加display: inline-block，去掉width属性。

例子:

HTML:
<div class="container">
    <h2>Text</h2>
</div>

CSS:
.container {
    display: inline-block;
}

演示:http://jsfiddle.net/5qPH9/