如何使用CSS定位文本框中的文本？

Question

我需要在右側的藍色框內位置的字「共享」，見下圖：

我有一個包含有UL另一個專區內的字分享一個div：

<div id="menuBox"> 
    <ul class="textMenu"> 
    <li>Web Design/HTML</li> 
    <li>Design Basics</li> 
    <li>Learn HTML CSS XML</li> 
    <li>Careers</li> 
    </ul> 
    <div id="share"> 
    Share 
    </div> 

這是CSS：

#menuBox 
{ 
    width:65%; 
    height:2%; 
    margin-left:auto; 
    margin-right:auto; 
    position: relative; 
    margin-top:100px; 
    clear: both; 
    background: #4789c1; 
    background-image: -webkit-linear-gradient(top, #4789c1, #286294); 
    background-image: -moz-linear-gradient(top, #4789c1, #286294); 
    background-image: -ms-linear-gradient(top, #4789c1, #286294); 
    background-image: -o-linear-gradient(top, #4789c1, #286294); 
    background-image: linear-gradient(to bottom, #4789c1, #286294); 
} 
.textMenu 
{ 
    color:white; 
    list-style-type: none; 
    margin-bottom:0px; 
} 
li 
{ 
    display:inline; 
    padding-right:10px; 
    padding-left:10px; 
    border-right: 2px solid white; 
    text-align:center; 
} 
#bigBox 
{ 
    width:65%; 
    height:80%; 
    margin-left:auto; 
    margin-right:auto; 
    margin-top:100px; 
    position: relative; 
    background-color:white; 
    box-shadow:0px 3px 3px 3px #C0C0C0; 
} 
#share 
{ 
    float:right; 
    position:relative; 
} 

我認爲，這個問題是因爲藍色框上沒有足夠的空間來表示「共享」這個詞，但我不知道如何解決這個問題，所以我嘗試添加marging-left和marging-right，但那是行不通的。我也試過填充和position:absolute;但這並不能解決問題。任何幫助？謝謝

Answer 1

您可以簡單地切換共享div和textMenu列表的順序。

FIDDLE

<div id="menuBox"> 
    <div id="share">Share</div> 
    <ul class="textMenu"> 
     <li>Web Design/HTML</li> 
     <li>Design Basics</li> 
     <li>Learn HTML CSS XML</li> 
     <li>Careers</li> 
    </ul> 
</div> 

這樣做的原因是，名單已經佔據了100％的寬度，所以如果我在後面加上正確的浮動的份額格 - 它獲取該菜單下撞倒。

Answer 2

演示：http://jsfiddle.net/LPtTn/1/

您可以使用table和table-cell：

HTML：

<div id="wrapper">  
<div id="menuBox"> 
    <ul class="textMenu"> 
    <li>Web Design/HTML</li> 
    <li>Design Basics</li> 
    <li>Learn HTML CSS XML</li> 
    <li>Careers</li> 
    </ul> 
</div>  

<div id="share"> 
    Share 
</div>  
</div>  

CSS：

#menuBox 
{ 
    width:80%; 
    background: #4789c1; 
    background-image: -webkit-linear-gradient(top, #4789c1, #286294); 
    background-image: -moz-linear-gradient(top, #4789c1, #286294); 
    background-image: -ms-linear-gradient(top, #4789c1, #286294); 
    background-image: -o-linear-gradient(top, #4789c1, #286294); 
    background-image: linear-gradient(to bottom, #4789c1, #286294); 
    display: table-cell;  

} 

#share{ 
    width:20%; 
    background: #4789c1; 
    background-image: -webkit-linear-gradient(top, #4789c1, #286294); 
    background-image: -moz-linear-gradient(top, #4789c1, #286294); 
    background-image: -ms-linear-gradient(top, #4789c1, #286294); 
    background-image: -o-linear-gradient(top, #4789c1, #286294); 
    background-image: linear-gradient(to bottom, #4789c1, #286294); 
    display: table-cell; 
    text-align:center; 
} 


.textMenu 
{ 
    color:white; 
    list-style-type: none; 
    margin-bottom:0px; 
} 
li 
{ 
display:inline; 
    padding-right:10px; 
    padding-left:10px; 
    border-right: 2px solid white; 
    text-align:center; 
} 

#wrapper{ 
    display: table; 
}