如何讓我的用戶名div根據用戶名的長度擴展其寬度？

目前我有一個父div的3個div。這些div中有1個包含用戶名，它需要根據名稱的長度來擴展其寬度。目前，我編輯父母包裝div時，我的div似乎都崩潰了。任何人都知道我可以解決這個問題？如何讓我的用戶名div根據用戶名的長度擴展其寬度？

這是林試圖解釋

enter image description here

我的HTML

<div id="user_wrap"> 

<div id="user_welcome"> 
Welcome <b>Christopher</b> 
</div> 

<div id="user_logout"> 
Logout? 
</div> 

<div id="user_pic"> 
<img src="images/user_pic.png" width="38" height="37" /> 
</div> 

</div>

我的CSS

#user_wrap{ 
float: right; 
height: 40px; 
margin-right: 10px; 
margin-top: 5px; 
position: relative; 
width: 190px; 
} 


#user_welcome{ 
float: left; 
position: relative; 
text-align: right; 
width: 130px; 
font-size: 11.8px; 
font-family: "Helvetica Neue", Helvetica, Arial; 
color: #e3e3e3; 
margin-bottom: 3px; 
padding-top: 3px; 
} 

#user_logout{ 
float: left; 
position: relative; 
text-align: right; 
width: 130px; 
font-size: 11.8px; 
font-weight: 200; 
font-family: "Helvetica Neue", Helvetica, Arial; 
color: #939393; 

} 

#user_pic{ 
border-radius: 5px; 
float: left; 
height: 37px; 
margin-top: -18px; 
margin-left: 10px; 
width: 38px; 

-moz-box-shadow: 0 1px 4px #000000; 
-webkit-box-shadow: 0 1px 4px #000000; 
box-shadow: 0 1px 4px #000000; 
}

來源

2011-12-31 Farreal

你試過數着名的長度，然後，如果它是在某些閾值隨寬度變化？ – webdad3 2011-12-31 15:45:11

你是什麼意思，「每當我編輯我的父母包裝div崩潰」？ – 2011-12-31 15:46:44

把你的例子打破它在www.jsfiddle.net看到的問題。 – Robert 2011-12-31 15:47:29

如果不聲明浮動元素的寬度，它將自動縮放其寬度以匹配內容，因此首先要做的是從CSS中移除寬度聲明。

現在的問題是，由於username元素和logout元素都是浮動的，如果父元素的寬度不受限制，它們會彼此相鄰放置。該解決方案是從他們去除浮動聲明，並把它們都變成一個新的浮動父DIV：

<div id="user_info"> 
    <div id="user_welcome"> 
    Welcome <b>Christopher</b> 
    </div> 

    <div id="user_logout"> 
    Logout? 
    </div> 
</div> 

#user_info { 
    float:left; 
}

演示：http://jsfiddle.net/bpeZp/

來源

2011-12-31 15:46:52 JJJ

啊對，謝謝:) – Farreal 2011-12-31 15:53:22

如何讓我的用戶名div根據用戶名的長度擴展其寬度？

回答

相關問題