2017-06-03 30 views
-1

我試圖讓我的網站的標題和導航在同一行上。我希望標題左對齊,導航要居中。我的代碼似乎沒有工作,所以我想知道如果有人有任何解決方案?提前致謝。如何在同一行上獲取標題和導航菜單

什麼,我想有它看起來像一個例子... enter image description here

我的header.php

<!DOCTYPE html> 
 
<html <?php language_attributes(); ?>> 
 
<head> 
 
<meta charset="<?php bloginfo('charset'); ?>"> 
 
<meta name="viewport" content="width=device-width"> 
 
<title><?php bloginfo('name'); ?></title> 
 
<?php wp_head(); ?> 
 
</head> 
 
<body <?php body_class(); ?>> 
 
<div class="container"> 
 
<!-- site-header --> 
 
<header class="site-header"> 
 
<h1><a href="<?php echo home_url(); ?>"><?php bloginfo('name'); ?></a></h1> 
 
<h5><?php bloginfo('description'); ?></h5> 
 
     
 
    <nav class="site-nav"> 
 
     <?php 
 
      wp_nav_menu(array(
 
      'menu' => 'Primary Menu Links', 
 
      'container_id' => 'cssmenu', 
 
      'walker' => new CSS_Menu_Walker() 
 
     )); 
 
     ?> 
 
    </nav> 
 
    </header> 
 
    </div>

我的CSS

.site-header h1 { 
 
margin: 0; 
 
    font-family: 'futura_tbold'; 
 
    font-size: 24px; 
 
    text-align: left; 
 
    text-transform: uppercase; 
 
    letter-spacing: 6px; 
 
    padding-top: 20px; 
 
    position: fixed; 
 
    z-index: 10000; 
 
} 
 
/* Drop Down Menu */ 
 
#cssmenu, 
 
#cssmenu ul, 
 
#cssmenu li, 
 
#cssmenu a { 
 
} 
 

 
#cssmenu { 
 
height: 37px; 
 
text-align: center; 
 
margin-bottom:50px; 
 
width: 0 auto; 
 
    margin-right:38px; 
 
} 
 
#cssmenu, 
 
#cssmenu > ul > li > ul > li a:hover 
 
} 
 
#cssmenu > ul { 
 
} 
 
#cssmenu > ul > li { 
 
list-style: inside none; 
 

 

 

 
position: relative; 
 
display: inline-block; 
 
} 
 
#cssmenu > ul > li > a { 
 

 
display: block; 
 
position: relative; 
 
padding: 12px 20px; 
 
text-align: center; 
 
text-decoration: none; 
 
font-size: 13px; 
 
font-family: 'textaw00-heavyregular', 'AvenirNextLTW01', 'Helvetica Neue', 'Helvetica', 'Arial', 'sans-serif'; 
 
color: #2f3847; 
 
    text-transform:uppercase; 
 
    letter-spacing: 1px; 
 
    font-weight:normal; 
 
    -webkit-font-smoothing: antialiased; 
 
} 
 
#cssmenu > ul > li > a:hover { 
 
color:#8F1E3E; 
 
} 
 
#cssmenu > ul > li:first-child > a { 
 
} 
 
#cssmenu > ul > li > a:after { 
 
content: ''; 
 
position: absolute; 
 
} 
 
#cssmenu ul li.has-sub:hover > a:after { 
 
    position: absolute; 
 
    top: 28px; 
 
    left: 11px; 
 
    display: inline-block; 
 
    border-right: 7px solid transparent; 
 
    border-bottom: 7px solid #3d0d1d; 
 
    border-left: 7px solid transparent; 
 
    border-bottom-color: rgba(61, 13, 29, 1); 
 
    content: ''; 
 
width: 0; 
 
height: 0; 
 
border-style: solid; 
 
border-width: 0 10px 10px 10px; 
 
border-color: transparent transparent #3d0d1d transparent; 
 
} 
 
#cssmenu > ul > li.has-sub > a:before { 
 
} 
 
#cssmenu > ul > li.has-sub:hover > a:before { 
 

 
    
 
} 
 
#cssmenu ul li.has-sub:hover > a { 
 
} 
 
#cssmenu ul li.has-sub:hover > ul, 
 
#cssmenu ul li.has-sub:hover > div { 
 
display: block; 
 
} 
 
#cssmenu ul li.has-sub > a:hover { 
 
color: #8F1E3E; 
 
} 
 
#cssmenu ul li > ul, 
 
#cssmenu ul li > div { 
 
display: none; 
 
width: auto; 
 
position: absolute; 
 
top: 38px; 
 
padding: 10px 0; 
 
background: #490f20; 
 
border-radius: 0px 0px 0px 0px; 
 
z-index: 999;   
 
} 
 
#cssmenu ul li > ul { 
 
width: 200px; 
 
} 
 
#cssmenu ul li > ul li { 
 
display: block; 
 
list-style: inside none; 
 
padding: 0; 
 
margin: 0; 
 
position: relative; 
 
} 
 
#cssmenu ul li > ul li a { 
 
outline: none; 
 
display: block; 
 
position: relative; 
 
margin: 0; 
 
padding: 8px 20px; 
 
color: #ffffff; 
 
text-decoration: none; 
 
text-align: left; 
 
    font-size: 13px; 
 
font-family: 'textaw00-heavyregular', 'AvenirNextLTW01', 'Helvetica Neue', 'Helvetica', 'Arial', 'sans-serif'; 
 
    text-transform:uppercase; 
 
    letter-spacing: 1px; 
 
    font-weight:normal; 
 
    -webkit-font-smoothing: antialiased; 
 
    line-height:25px; 
 
} 
 
#cssmenu ul ul a:hover { 
 
color: #ffffff; 
 
    background-color:#8F1E3E; 
 
} 
 
#cssmenu > ul > li.has-sub > a:hover:before { 
 
border-top: 5px solid #ffffff; 
 
}

回答

0

在這裏你去好友希望這有助於

Jsfiddle

<div class="navigation"> 
    <div class="container"> 
    <div class="logo"> 
     <!-- <img src="#" alt=""> --> 
     <span>LOGO</span> 
    </div> 
    <nav> 
     <ul> 
     <li>Page 1</li> 
     <li>Page 2</li> 
     <li>Page 3</li> 
     <li>Page 4</li> 
     </ul> 
    </nav> 
    </div> 
</div> 

.navigation { 
    float: left; 
    width: 100%; 
    padding: 10px 0; 
    border-bottom: 2px solid black; 
} 

.container { 
    max-width: 90%; 
    margin: 0 auto; 
    position: relative; 
} 

.logo { 
    position: absolute; 
    top: 0; 
    left: 0; 
} 

nav ul { 
    margin: 0 auto; 
    text-align: center; 
} 

nav ul li { 
    display: inline-block; 
}