Question

我正在构建一个菜单，其中包含两个部分和一个徽标。

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

对不起我的英文：

的jsfiddle：

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浮动：左边和m-contact浮动：右边，而不是让#logo的边距为负，将它移动到中心。

小提琴：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包装器外面。

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

2 个答案: