Question

（注意：出于兼容性原因，我可能只使用HTML和CSS。）

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

以下是我遇到的问题的一个示例：

<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

您可以将display：inline-block添加到父div并删除width属性。

示例：

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

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

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

Answer 2

您可以使用display: table。请参阅修改后的示例：http://jsfiddle.net/cArg7/1/

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;
border-radius: 5px;
padding: 2px;
width:auto; 
display: table;
}

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

简化html代码，合并<a>和<div>代码：

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

Answer 3

将父div的display设置为inline-block会将父div包装为文本的宽度。请参阅this作为示例。

给父母的宽度与孩子相同

3 个答案: