Html 将div width设置为与之相同'；使用css编辑内容

我正在尝试创建一个

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>

.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;}

这是小提琴：

---

我对您的代码做了一些更改。检查以下链接。您可以使用

dispaly:inline块

---

您可以这样尝试：

CSS:

 .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;
        width: auto;
        display:inline-block;
    }

---

希望这会对你有所帮助。

只是不要在页面上加一个宽度：Pi需要父页面是页面的100%，而不是子页面，并且它的样式中没有宽度width:auto；代码没有任何变化，结果与我所需要的不同。谢谢