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

Я пытаюсь удалить вертикальную линию в меню справа от ссылки «Связаться с нами», а затем центрировать всю панель меню. Вот код (ссылка JSFiddle находится внизу). Заранее спасибо за вашу помощь :)Как исправить этот CSS и настроить меню по горизонтали?

HTML:

<body> 

<div id="page_wrapper"> 
<div class="page_padding"> 

<div id="header"> 
<div class="inner_padding"> 

</div> 
</div> 

<div id="menu_container"> 
<ul> 
    <li><a href="#">Home</a></li> 
    <li><a href="#">About Us</a></li> 
    <li><a href="#">Registration</a></li> 
    <li><a href="#">User Programs</a></li> 
    <li><a href="#">News</a></li> 
    <li><a href="#">Calendar</a></li> 
    <li><a href="#">FAQ</a></li> 
    <li><a href="#">Contact Us</a></li> 
</ul> 
<div class="spacer"></div> 
</div> 

</body>

CSS: добавлены

body{ 
    margin:15px 0 15px 0; 
    padding:0; 
    line-height: 1.7em; 
    text-align: center; 
    font-family: verdana, arial, sans-serif; 
    font-size: 75%;  
} 


#page_wrapper { 
    width: 890px; 
    border:1px solid #8A837D; 
    background-color: #FFFFFF; 
    margin: 0 auto; 
    padding:0; 
    text-align: left; 
} 

#header { 
    background: #999E8A url('../img/#.jpg') top right no-repeat; 
    height: 135px; 
    padding-top:25px; 
    margin:0; 
} 


#content_wrapper { 
    float: left; 
    width: 100%; 
} 

.inner_padding { 
    margin: 10px; /*Margins for inner DIV inside each column (to provide padding)*/ 
} 

.page_padding { 
    margin: 15px; /*Margins for inner DIV inside each column (to provide padding)*/ 
} 


#menu_container { 
    margin:0; 
    padding: 0; 
} 

#menu_container ul { 
    padding-left: 0; 
    margin: 0; 
    background-color: #CC6600; 
    color: White; 
    float: left; 
    width: 100%; 
    font-family: verdana, arial, helvetica, sans-serif; 
    font-size: 1.2em; 
    font-weight: bold; 
} 

#menu_container ul li { display: inline; line-height: 1em;} 

#menu_container ul li a { 
    padding: 1em 1em 1em 1em; 
    background-color: #CC6600; 
    color: White; 
    text-decoration: none; 
    float: left; 
    border-right: 1px solid #fff; 
} 

#menu_container ul li a:hover { 
    background-color: #FF9933; 
    color: #fff; 
} 

.spacer {clear:both;}

>>>> See example of above on JSFiddle

источник

2013-10-28 Scott James

Вы можете использовать правила CSS display: table на <ul> и display: table-cell на <li>. Это приведет к тому, что меню будет идеально вписываться в горизонтальное пространство. Я удалил display: inline и добавил display: block в теги <a>.

Чтобы удалить границу, вы можете использовать селектор CSS :first-child или :last-child. Я бы рекомендовал использовать: first-child, а затем положить границу слева от <a>. Это происходит только потому, что: первый ребенок поддерживается в большинстве браузеров.

Вот скрипка: http://jsfiddle.net/davidpauljunior/94PsT/2/

источник

2013-10-28 06:43:57 davidpauljunior

Я ценю все полезные ответы. Я нашел ваше самое элегантное и подходящее решение. Спасибо! –

see this demo

стили CSS

#menu_container { 
    margin:0; 
    padding: 0; 
    padding: 0 20px; 
    background: #CC6600; 
} 

#menu_container ul li:last-child a{ 
    border: none; 
}

источник

2013-10-28 06:41:00

edit css like this

демо: http://jsfiddle.net/94PsT/4/

#menu_container ul { 
padding-left: 0; 
margin: 0 auto; 
background-color: #CC6600; 
color: White; 
width:92%; 
font-family: verdana, arial, helvetica, sans-serif; 
font-size: 1.2em; 
font-weight: bold; 
} 

#menu_container ul li:last-child a { 
padding: 1em 1em 1em 1em; 
background-color: #CC6600; 
color: White; 
text-decoration: none; 
float: left; 
border-right: none; 
}

источник

2013-10-28 07:46:03 radha

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

ответ

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