Question

我需要在右侧的蓝色框内找到“分享”一词，如下所示： enter image description here

我有一个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>

这就是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，它会在菜单下被删除。

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

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

2 个答案: