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

Question

我需要在右侧的蓝色框中放置“共享”一词，如下所示:

我有一个 div，它在另一个带有 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% 的宽度，所以如果我之后添加右浮动的共享 div - 它会在菜单下被击倒。