Html 如何使用css在框中定位文本？

我需要将“共享”一词放在右侧的蓝色框中，请参见以下内容：

我有一个div，在另一个div中包含单词Share，带有ul：

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

---

我认为这个问题是因为蓝框中没有足够的空间来放置“共享”一词，但我不知道如何解决这个问题，我尝试添加左边缘和右边缘，但这不起作用。我还尝试了填充和

位置：绝对但这并不能解决问题。有什么帮助吗？谢谢
您可以简单地切换共享div和文本菜单列表的顺序


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


分享

网页设计/HTML
设计基础
学习HTML CSS XML
事业


原因是列表已经占据了100%的宽度，因此如果我在之后添加右浮动共享div，它会在菜单下被删除。
演示：

您可以使用
表格
和
表格单元格
：

HTML:

尝试将“共享”与“菜单框”放在同一个分区中。
<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> 

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

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