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

这是小提琴：

http://jsfiddle.net/7GA45/

Answer 1

我在代码中做了一些更改。请检查以下链接。您可以使用dispaly: inline-block

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

Answer 2

您可以尝试这样做： DEMO

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

希望这会对你有帮助..

使用css将div宽度设置为与其内容相同

2 个答案: