html - 具有不同宽度和多个列表的居中 Logo

Question

我一直在尝试创建一个由三部分组成的导航栏，居中 Logo 左侧的列表、 Logo 本身和 Logo 右侧的列表。我试过绝对定位 Logo 并 float 列表，但是当浏览器的宽度改变时，这会导致 Logo 覆盖列表。

任何建议将不胜感激，下面包含 JSFiddle :-)。

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

这可能对你有用

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>