Как разместить мою навигационную панель горизонтально?

Я довольно новичок в веб-разработке. Я пытаюсь настроить навигационную панель горизонтально на странице, попробовал посмотреть на другие подобные вопросы здесь, но я до сих пор не могу этого сделать. Заранее спасибо.Как разместить мою навигационную панель горизонтально?

www.livewasteless.com

Мой CSS:

#mainNav{ 
background: #fff; 
height:40px; 

} 

#mainNav li{ 
float: left; 
list-style-type: none; 
z-index: 50; 
border-right: 1px solid #eee; 
} 

#mainNav li:last-child { border-right: 0; } 

#mainNav ul a{ 
display: block; 
text-decoration: none; 
padding-left: 28px; 
padding-right: 28px; 
padding-top: 15px; 
padding-bottom: 15px; 
font-size: 12px; 
color: #333333; 
font-weight: bold; 
text-transform: uppercase; 
height: inherit; 
} 

#mainNav ul ul a{ 
line-height: 15px; 
font-weight: normal; 
border-top: none; 
}

Мой HTML:

   <!-- BEGIN NAV WRAP --> 
      <div class="nav-wrap"> 



       <!-- BEGIN MAIN NAV FULL --> 
       <div class="main" id="mainNav"> 

         <ul id="menu-nav-menu" class="sf-menu"><li id="menu-item-696" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-696"><a href="http://www.livewasteless.com/services/">Services</a></li> 
<li id="menu-item-695" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-695"><a href="http://www.livewasteless.com/projects/">Projects</a></li> 
<li id="menu-item-829" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-829"><a href="http://www.livewasteless.com/resource-center/">Resource Center</a> 
<ul class="sub-menu"> 
    <li id="menu-item-685" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-685"><a href="http://www.livewasteless.com/legislation/">Legislation</a> 
    <ul class="sub-menu"> 
     <li id="menu-item-686" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-686"><a href="http://www.livewasteless.com/legislation/ab-1103/">AB 1103 &#8211; Energy Star Benchmark</a></li> 
     <li id="menu-item-687" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-687"><a href="http://www.livewasteless.com/legislation/ab-1881/">AB 1881 &#8211; Landscape Water Conservation</a></li> 
     <li id="menu-item-688" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-688"><a href="http://www.livewasteless.com/legislation/ab-531/">AB 531 &#8211; Energy Consumption Disclosure</a></li> 
     <li id="menu-item-689" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-689"><a href="http://www.livewasteless.com/legislation/ab-758/">AB 758 &#8211; Energy Audits</a></li> 
     <li id="menu-item-691" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-691"><a href="http://www.livewasteless.com/legislation/ab-920/">AB 920 &#8211; Surplus Solar Generation</a></li> 
     <li id="menu-item-690" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-690"><a href="http://www.livewasteless.com/legislation/ab-811/">AB 811 &#8211; PACE Financing</a></li> 
     <li id="menu-item-692" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-692"><a href="http://www.livewasteless.com/legislation/calgreen/">CALGreen</a></li> 
     <li id="menu-item-693" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-693"><a href="http://www.livewasteless.com/legislation/carbon-reduction-surcharge/">Carbon Reduction Surcharge</a></li> 
     <li id="menu-item-694" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-694"><a href="http://www.livewasteless.com/legislation/sb-32/">SB 32</a></li> 
    </ul> 
</li> 
</ul> 
</li> 
<li id="menu-item-682" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-682"><a href="http://www.livewasteless.com/about/">About Us</a></li> 
<li id="menu-item-799" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-799"><a href="http://www.livewasteless.com/contact/">Contact</a></li> 
<li id="menu-item-683" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-683"><a href="http://www.livewasteless.com/affiliations/">Affiliations</a></li> 
<li id="menu-item-802" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-802"><a href="http://www.livewasteless.com/posts/">Blog</a></li> 
</ul>    
       <!-- END MAIN NAV FULL -->

источник

2013-06-10 Corey Starbird

Не могли бы вы показать нам свой HTML, тоже, пожалуйста Corey? – Paul

Что такое текущее поведение –

Я попытался добавить HTML, но я не знал, как отформатировать его здесь:/Я узнаю, хотя, извините. –

, как я уже ответил here - можно добавить inline-block к изменению ul

это в вашем CSS

#mainNav{ 
background: #fff; 
height:40px; 
text-align:center; 
} 
ul#menu-nav-menu{ 
display: inline-block; 
}

источник

2013-06-10 20:38:16 Mark

Спасибо, но я смущен именем второго элемента –

, который нацелен на вашу 'ul', вы также можете использовать' #mainNav ul {display: inline-block;} ' – Mark

WORKED! Спасибо за вашу помощь! –

Добавить это родительский элемент CSS:

margin:0 auto;

источник

2013-06-10 20:30:17 RickyDburn

Не центрируется таким образом без объявления свойства 'width'. – PointedEars

#mainNav{ 
     margin:0 auto; 
     width:70% 
    }

источник

2013-06-10 20:34:45 Hobbes

Как разместить мою навигационную панель горизонтально?

ответ

Смежные вопросы