2015-06-21 1 views
0

Вот CSS используетЯ пытаюсь переместить ссылки в навигационной панели для права на 160px, но я не могу этого сделать

@import url(http://fonts.googleapis.com/css?family=Open+Sans:700); 
    #cssmenu { 
    background: #f96e5b; 
    width: auto; 
    } 
    #cssmenu > ul { 
    display:inline-block; 
    margin: 0 auto; 
    padding: 0; 
    line-height: 1; 
    text-align: 160px; 
    zoom: 1; 
    } 
    #cssmenu ul:after { 
    content: " "; 
    display: block; 
    font-size: 0; 
    height: 0; 
    clear: both; 
    visibility: hidden; 
    } 
    #cssmenu ul li { 
    display: inline-block; 
    padding: 0; 
    margin: 0; 
    } 
#cssmenu.align-right ul li { 
    float: right; 
} 
#cssmenu.align-center ul { 
    text-align: center; 
} 
#cssmenu ul li a { 
    color: #ffffff; 
    text-decoration: none; 
    display: block; 
    padding: 15px 25px; 
    font-family: 'Open Sans', sans-serif; 
    font-weight: 700; 
    text-transform: uppercase; 
    font-size: 14px; 
    position: relative; 
    -webkit-transition: color .25s; 
    -moz-transition: color .25s; 
    -ms-transition: color .25s; 
    -o-transition: color .25s; 
    transition: color .25s; 
} 
#cssmenu ul li a:hover { 
    color: #333333; 
} 
#cssmenu ul li a:hover:before { 
    width: 100%; 
} 
#cssmenu ul li a:after { 
    content: ""; 
    display: block; 
    position: absolute; 
    right: -3px; 
    top: 19px; 
    height: 6px; 
    width: 6px; 
    background: #ffffff; 
    opacity: .5; 
} 
#cssmenu ul li a:before { 
    content: ""; 
    display: block; 
    position: absolute; 
    left: 0; 
    bottom: 0; 
    height: 3px; 
    width: 0; 
    background: #333333; 
    -webkit-transition: width .25s; 
    -moz-transition: width .25s; 
    -ms-transition: width .25s; 
    -o-transition: width .25s; 
    transition: width .25s; 
} 
#cssmenu ul li.last > a:after, 
#cssmenu ul li:last-child > a:after { 
    display: none; 
} 
#cssmenu ul li.active a { 
    color: #333333; 
} 
#cssmenu ul li.active a:before { 
    width: 100%; 
} 
#cssmenu.align-right li.last > a:after, 
#cssmenu.align-right li:last-child > a:after { 
    display: block; 
} 
#cssmenu.align-right li:first-child a:after { 
    display: none; 
} 
@media screen and (max-width: 768px) { 
    #cssmenu ul li { 
    float: none; 
    display: block; 
    } 
    #cssmenu ul li a { 
    width: 100%; 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box; 
    border-bottom: 1px solid #fb998c; 
    } 
    #cssmenu ul li.last > a, 
    #cssmenu ul li:last-child > a { 
    border: 0; 
    } 
    #cssmenu ul li a:after { 
    display: none; 
    } 
    #cssmenu ul li a:before { 
    display: none; 
    } 
} 

HTML, я использую как сильфонные

<div id='cssmenu'> 
<ul> 
    <li class='active'><a href='index.html'><span>Home</span></a></li> 
    <li><a href='#'><span>Products</span></a></li> 
    <li><a href='#'><span>About</span></a></li> 
    <li class='last'><a href='#'><span>Contact</span></a></li> 
</ul> 
</div> 

Когда я использую этот код своего сайта, панель навигации применяется к полной ширине, а ссылка на панели навигации находится слева. Я хочу переместить ссылку на панель навигации 160px с правой стороны.

Мой сайт http://logansdroids.com

ответ

1

text-allign не принимает значения является px s.

Используйте это:

#cssmenu > ul { 
    display: inline-block; 
    margin: 0 auto; 
    padding: 0; 
    line-height: 1; 
    margin-left: 160px; 
    zoom: 1; 
} 
+0

работал отлично в своем блоге спасибо, если я хочу, чтобы сделать панель навигации центра (не полная ширина) без увеличения его влево и вправо. Если вам нужен пример, проверьте панель навигации этого блога под главной навигационной панелью. Http://www.shoutmeloud.com –

+0

Добавьте элемент 'содержатьernbt' в элемент' NewContainer'. Он работает так, как будто он не имеет никакой ширины, а родительский контейнер по умолчанию равен ширине 100%. –