Html меню, последняя кнопка на правой стороне

Im создание простого сайта для друга, но я понятия не имею, как выровнять последний li элемент вправо, когда все вынуждено левая сторона. Вот что я на самом деле имею, я пытался добавить пользовательский идентификатор/класс для последнего li и пытался плавать: правильно, но не работает. Im потерял в этом так трудноHtml меню, последняя кнопка на правой стороне

<div id="wrap"> 
    <div id="top"> 
    <ul id="menu"> 
     <li><a href="#">Home</a></li> 
     <li><a href="#">Team</a></li> 
     <li><a href="#">Gallery</a></li> 
     <li><a href="#">Media</a></li> 
     <li><a href="#">Partners</a></li> 
     <li><a href="#">Contact</a></li> 
     <li><a href="#">Login</a></li> 
    </ul> 
    </div> 

    #wrap{ 
    width: 1000px; 
    margin: 0 auto; 
    padding: 0; 
} 

#top{ 
    width:1000px; 
    height:50px; 
} 

#menu ul{ 
    padding:0; 
    list-style-type: none; 
} 

#menu li{ 
    float:left; 
    list-style-type: none; 
    padding-right: 50px; 
    padding-top:0px; 
    margin-left: -40px; 


} 
#menu li a{ 
    display: block; 
    padding-left: 12px; 
    padding-right:12px; 
    padding-top: 7px; 
    padding-bottom: 7px; 
    background-color:#123e90; 
    color: #fff; 
    font-size: 12px; 
    text-transform:uppercase; 
    font-family:Tahoma, Geneva, sans-serif; 
    text-decoration: none; 
    font-weight:bold; 

} 

#menu li a:hover{ 
    display: block; 
    padding-left: 12px; 
    padding-right:12px; 
    padding-top: 7px; 
    padding-bottom: 7px; 
    background-color:#1c5cd2; 
    color: #fff; 
    font-size: 12px; 
    text-transform:uppercase; 
    font-family:Tahoma, Geneva, sans-serif; 
    text-decoration: none; 
    font-weight:bold; 

}

Спасибо

источник

2015-02-05 Tomáš Melich

Jsfiddle http://jsfiddle.net/fhs6m2cy/ –

что делают вас означает, когда вы говорите выравнивание справа? – Pogrindis

Я выровнял все элементы li на левой стороне, но я хочу один на правой стороне. это http://prntscr.com/61coex –

Используйте last-child опцию

#wrap { 
 
    width: 1000px; 
 
    margin: 0 auto; 
 
    padding: 0; 
 
} 
 
#top { 
 
    width: 1000px; 
 
    height: 50px; 
 
} 
 
#menu ul { 
 
    padding: 0; 
 
    list-style-type: none; 
 
} 
 
#menu li { 
 
    float: left; 
 
    list-style-type: none; 
 
    padding-right: 50px; 
 
    padding-top: 0px; 
 
    margin-left: -40px; 
 
} 
 
#menu li:last-child { 
 
    float: right; 
 
} 
 
#menu li a { 
 
    display: block; 
 
    padding-left: 12px; 
 
    padding-right: 12px; 
 
    padding-top: 7px; 
 
    padding-bottom: 7px; 
 
    background-color: #123e90; 
 
    color: #fff; 
 
    font-size: 12px; 
 
    text-transform: uppercase; 
 
    font-family: Tahoma, Geneva, sans-serif; 
 
    text-decoration: none; 
 
    font-weight: bold; 
 
} 
 
#menu li a:hover { 
 
    display: block; 
 
    padding-left: 12px; 
 
    padding-right: 12px; 
 
    padding-top: 7px; 
 
    padding-bottom: 7px; 
 
    background-color: #1c5cd2; 
 
    color: #fff; 
 
    font-size: 12px; 
 
    text-transform: uppercase; 
 
    font-family: Tahoma, Geneva, sans-serif; 
 
    text-decoration: none; 
 
    font-weight: bold; 
 
}

<div id="wrap"> 
 
    <div id="top"> 
 
    <ul id="menu"> 
 
     <li><a href="#">Home</a> 
 
     </li> 
 
     <li><a href="#">Team</a> 
 
     </li> 
 
     <li><a href="#">Gallery</a> 
 
     </li> 
 
     <li><a href="#">Media</a> 
 
     </li> 
 
     <li><a href="#">Partners</a> 
 
     </li> 
 
     <li><a href="#">Contact</a> 
 
     </li> 
 
     <li><a href="#">Login</a> 
 
     </li> 
 
    </ul> 
 
    </div>

источник

2015-02-05 13:57:51

. Итак, это работает над каждым последним элементом в этом div правее? Кстати, спасибо! он отлично работает! –

@ TomášMelich может быть только 1 последний элемент! :) – Pogrindis

Html меню, последняя кнопка на правой стороне

ответ

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