html - 使用 css 将 div 宽度设置为其内容

Question

我正在尝试创建一个 DIV 来根据它的内容改变它的宽度。这怎么可能？

这是我的代码:

HTML:

<div class="more-info-dropdown-div">
   <div id="advanced-features-more-dropdown" class="more-info-dropdown-div-label" >
    <span>Show more advanced features</span>
       <img class="more-info-dropdown-div-arrow" src="default-images/infos-arrow.png"/>
   </div>   
</div>

这里是 CSS:

.more-info-dropdown-div {
width: 100%;
height: 25px;
-webkit-box-shadow: 0 -6px 12px -8px #bdbdbd;
box-shadow: 0 -6px 12px -8px #bdbdbd;
text-align: center;
line-height: 25px;
margin-bottom:15px;
}

.more-info-dropdown-div-label {
background: #fafafa;
padding: 4px 10px 4px 10px;
margin: 0 auto;
font-size: 20px;
-webkit-border-radius: 0 0 50px 50px;
border-radius: 0 0 50px 50px;
cursor: pointer;
}

.more-info-dropdown-div-arrow {
margin-left: 20px;
}

.more-info-dropdown-div-label:hover more-info-dropdown-div-arrow{margin-top:8px;}

这是 fiddle :

http://jsfiddle.net/7GA45/

Answer 1

我对你的代码做了一些修改。检查以下链接。您可以使用 dispaly: inline-block

http://jsfiddle.net/7GA45/4/