Question

我一直在尝试创建一个导航栏，其中包含三个部分，一个位于居中徽标左侧的列表，徽标本身以及徽标右侧的列表。我已经尝试过绝对定位徽标并浮动列表但是当浏览器的宽度发生变化时，这会导致徽标覆盖列表。

任何建议都会非常感激，JSFiddle包含在下面： - ）。

HTML

 <div class="navigation">
    <div class="container-1020">
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Work</a></li>
            <li><a href="#">Contact</a></li>
            <li><a href="#">Blog</a></li>
        </ul>
            <div class="nav-logo">
                <img src="http://placehold.it/200x60"/>
            </div>
        <ul>
            <li>01234 123456</li>
        </ul>
    </div>
</div>

CSS

.navigation {
    background: #222222;
}

.container-1020 {
    max-width: 1020px;
    min-width: 500px;
    margin: 0 auto;
}

ul {
    color: #fff;
    margin: 0;
    list-style-type: none;
}

li {
    display: inline; 
    margin-right: 10px;
}

li:last-child {
     margin-right: 0 !important;   
}

.logo-container {
     width: 200px;
     height: 60px;  
}

Answer 1

一个人，更正徽标的类名，是.nav-logo还是.logo-container

然后将您决定的ul和任何徽标容器类设置为display:inline-block

Answer 2

这可能对你有用

FIDDLE

的CSS：

* {
    margin: 0;
}
a {
    color: #ffffff;
    text-decoration: none;
}
.navigation {
    background: #222222;
}
.container-1020 {
    max-width: 1020px;
    min-width: 500px;
    margin: 0 auto;
}
ul {
    color: #fff;
    list-style-type: none;
    display: inline-block;
    width: 30%;
}
ul:last-child {
    text-align: right;
}
.nav-logo {
    display: inline-block;
    width: 30%;
}

HTML：

<div class="navigation">
    <div class="container-1020">
        <ul class="left">
            <li><a href="#">Home</a>

            </li>
            <li><a href="#">Work</a>

            </li>
            <li><a href="#">Contact</a>

            </li>
            <li><a href="#">Blog</a>

            </li>
        </ul>
        <div class="nav-logo">
            <img src="http://placehold.it/200x60" />
        </div>
        <ul class="right">
            <li>01234 123456</li>
        </ul>
    </div>
</div>

带有不同宽度和多个列表的居中徽标

2 个答案: