當我編輯文本時，如何防止徽標移動？

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包裝的外部。