Как создать центрированную навигационную панель HTML CSS

Question

Я пытаюсь создать навигационную панель, в которой мои ссылки на страницы сосредоточены посередине с логотипом, выровненным с левой стороны, и другой ссылкой, выровненной с правой стороны. С моей текущей настройкой, что мне нужно сделать, чтобы создать это?

#trans-nav { 
 
    list-style-type: none; 
 
    height: 40px; 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 
#trans-nav { 
 
    list-style-type: none; 
 
    height: 40px; 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 
#trans-nav li { 
 
    float: left; 
 
    position: relative; 
 
    padding: 0; 
 
    line-height: 40px; 
 
    background: #666 url(nav-bg.png) repeat-x 0 0; 
 
} 
 
#trans-nav li:hover { 
 
    background-position: 0 -40px; 
 
} 
 
#trans-nav li a { 
 
    display: block; 
 
    padding: 0 15px; 
 
    color: #fff; 
 
    text-decoration: none; 
 
} 
 
#trans-nav li a:hover { 
 
    color: #0F0 
 
} 
 
#trans-nav li ul { 
 
    opacity: 0; 
 
    position: absolute; 
 
    left: 0; 
 
    width: 8em; 
 
    background: #63867f; 
 
    list-style-type: none; 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 
#trans-nav li:hover ul { 
 
    opacity: 1; 
 
} 
 
#trans-nav li ul li { 
 
    float: none; 
 
    position: static; 
 
    height: 0; 
 
    line-height: 0; 
 
    background: none; 
 
} 
 
#trans-nav li:hover ul li { 
 
    height: 30px; 
 
    line-height: 30px; 
 
} 
 
#trans-nav li ul li a { 
 
    background: #666 
 
} 
 
#trans-nav li ul li a:hover { 
 
    background: #666 
 
} 
 
#trans-nav { 
 
    background-color: #666; 
 
}

<ul id="trans-nav"> 
 
    <li><a href="#">Home</a> 
 
    </li> 
 
    <li><a href="#">About</a> 
 
    </li> 
 
    <li><a href="#">Products</a> 
 
    <ul> 
 
     <li><a href="#">Widgets</a> 
 
     </li> 
 
     <li><a href="#">Thingamabobs</a> 
 
     </li> 
 
     <li><a href="#">Doohickies</a> 
 
     </li> 
 
    </ul> 
 
    </li> 
 
    <li><a href="#">Contact</a> 
 
    </li> 
 
    <li><a href="#">Info</a> 
 
    </li> 
 
</ul>

Answer 1

Я создал простой пример того, что вы ищете. Возможно, возьмите с нее некоторые указатели.

HTML

<header> 
    <div class="logo"> 
    <span>Logo</span> 
    </div> 
    <nav class="nav"> 
    <ul> 
     <li><a href="#">Link One</a></li> 
     <li><a href="#">Link Two</a></li> 
     <li><a href="#">Link Three</a></li> 
    </ul> 
    </nav> 
    <div class="other"> 
    <a href="#">Link</a> 
    </div> 
</header> 

CSS

header {} 

a { 
    color: #FFF; 
} 

.logo, 
.nav, 
.other { 
    float: left; 
    min-height: 50px; 
    color: #FFF; 
} 

.logo { 
    width: 25%; 
    background: #333; 
} 

.logo span { 
    display: inline-block; 
    padding: 1em; 
} 

.nav { 
    width: 50%; 
    background: #666; 
} 

.nav ul { 
    margin: 0; 
    padding: 0; 
} 

.nav ul li { 
    display: inline-block; 
    padding: 1em; 
} 

.other { 
    width: 25%; 
    background: #999; 
} 

.other a { 
    display: inline-block; 
    padding: 1em; 
} 

@media (max-width: 640px) { 

    .logo, .nav, .other { 
    clear: both; 
    width: 100%; 
    } 

    .nav ul li { 
    display: block; 
    } 
} 

JSFiddle example