当我编辑文本时，如何防止徽标移动？

Question

我正在建立一个带有两个部分和一个标志的菜单。

我想知道如何防止徽标从两个部分更改文字时移动。我想修正这个标志，当我改变关于我们的例子时，我想看看关于我们的编辑和移动到左侧，而不是右侧。

对不起，我的英语：

的jsfiddle：

http://jsfiddle.net/uL52rvwn/

HTML：

<div class="menu"> 
    <div class="m-info"> 
     <ul> 
      <li class="l-aboutus"><a>About us</a></li> 
     </ul> 
    </div> 
    <div id="logo"><img alt="logo" src="http://i.imgur.com/bebZYcu.png" width="80" height="80" /></div> 
    <div class="m-contact"> 
     <ul> 
      <li class="l-ourcontacts"><a>Contacts</a></li> 

     </ul> 
    </div> 
</div> 

Answer 1

我做了什么？我制作了m-info float：left和m-contact float：right，这使得＃标志的边距为负值以将其移动到中心位置。

小提琴：http://jsfiddle.net/uL52rvwn/3/

<style> 
.m-info { 
    width: 50%; 
    float: left; 
    text-align: right; 
    margin-left: -40px; 
    padding-right: 40px; 
} 
.m-contact { 
    width: 50%; 
    float: right; 
    text-align: left; 
    padding-left: 40px; 
    margin-right: -40px; 
} 
#logo { 
    float: left; 
    margin-left: -40px; 
    margin-right: -40px; 
} 

.menu ul { 
    padding: 0; 
} 
.menu li { 
    display: inline; 
    padding: 10px; 
    color: #eaeaea; 
    text-transform: uppercase; 
    z-index: 11; 
    position: relative; 
} 
.m-info ul li a, .m-contact ul li a { 
    text-transform: uppercase; 
    color: #a1a1a1; 
    letter-spacing: 7px; 
    font-size: 12px; 
} 
.m-info ul li a:hover, .m-contact ul li a:hover{ 
    cursor:pointer; 
    color:#c8c8c8; 
} 
.m-contact ul{ 
    margin-right:20px; 
} 
</style> 
<div class="menu"> 
    <div class="m-info"> 
     <ul> 
      <li class="l-aboutus"><a>About us</a></li> 
     </ul> 
    </div> 
    <div id="logo"><img alt="logo" src="http://i.imgur.com/bebZYcu.png" width="80" height="80" /></div> 
    <div class="m-contact"> 
     <ul> 
      <li class="l-ourcontacts"><a>Contacts</a></li> 
     </ul> 
    </div> 
</div> 

Answer 2

绝对定位应该工作：http://jsfiddle.net/6L35a0up/7/

我改变了下面的CSS规则：

#logo img { 
    left:50%; 
    z-index: 12; 
    position: absolute; 
} 

并将徽标div移到.menu包装的外部。