CSS: проблемы с выравниванием изображения спрайта - PullRequest
Новая
       24

CSS: проблемы с выравниванием изображения спрайта

0 голосов
/ 01 марта 2012

Вот моя ссылка для разработчиков: http://leongaban.com/dev/just_nav.html

У меня проблемы с выравниванием текста и выравниванием спрайта.Это css sprite tutorial , с которой я работаю.

Чего я не понимаю, так это того, почему разные значения li, я посмотрел в инспекторе Chrome, и в настоящее время ширина первой кнопки навигации равна 190 , а 2-й - 215 .

Кажется, он основан на тексте внутри li.Как мне правильно создать 4 навигационные кнопки размером 196 x 60 с 2 пикселями между 1-м и 2-м и 3-м и 4-м?

Любые советы приветствуются!

Текущий CSS: 

.nav {
width: 790px;
height: 60px;
}

#nav { width: 790px; margin: 0 auto; padding: 0;}

#nav ul {
padding: 0;
margin: 0;
}

#nav li {
width: 196px;
display: inline;
list-style-type: none;
font-family: 'Droid Sans', sans-serif;
font-size: 24px;
color: white;
}

#nav li a {
background-image:url('../img/sprite_nav.png');
background-repeat:no-repeat;
color: white;
text-decoration: none;
text-align: center;
line-height: 30px;
height: 60px;
padding: 0px 2px 32px 100px;
}

#nav li a.item1 {background-position:0px 0px; }
#nav li a:hover.item1 {background-position:0px -60px; }
#nav li a:active.item1 {background-position:0px -120px; }

#nav li a.item2 {background-position:0px 0px; }
#nav li a:hover.item2 {background-position:0px -60px; }
#nav li a:active.item2 {background-position:0px -120px; }

#nav li a.item3 {background-position:0px 0px; }
#nav li a:hover.item3 {background-position:0px -60px; }
#nav li a:active.item3 {background-position:0px -120px; }

#nav li a.item4 {background-position:0px 0px; }
#nav li a:hover.item4 {background-position:0px -60px; }
#nav li a:active.item4 {background-position:0px -120px; }

Ответы [ 4 ]

3 голосов
/ 01 марта 2012

У вас там несколько проблем.Во-первых, поместите всю вашу разметку в <a> вместо <li>.И float: left ваши <li> с вместо display: inline.Также <a> должно быть display: block, а height и line-height должны совпадать для центрирования текста по вертикали.Также list-style-type входит в <ul>, а не <li>.У меня нет реального способа попробовать это, но это должно сработать. 

#nav ul { list-display-type: none; }
#nav li { float: left; }
#nav a { 
    display: block;
    width: 196px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    /* The rest of styles */
}
2 голосов
/ 01 марта 2012 
#nav li a {
background-image:url('../img/sprite_nav.png');
background-repeat:no-repeat;
color: white;
text-decoration: none;
line-height: 30px;
text-align: center;
height: 45px;
width: 190px;
display: block;
float: left;
padding: 15px 0px 0px 0px;
margin-right: 2px;
}
2 голосов
/ 01 марта 2012

У вас есть заполнение 0px 2px 32px 100px для элементов a 

<a class="item2" href="#" title="View Interactive">Interactive</a>

Я бы посоветовал вам попробовать следующий вызов css 

 #nav li a {
   background-image:url('../img/sprite_nav.png');
   background-repeat:no-repeat;
   color: white;
   text-decoration: none;
   text-align: center;
   line-height: 30px;
   height: 60px;
   padding: 32px 0;
   width: 196px;
   display: block;
   float: left;
 }
1 голос
/ 01 марта 2012

"4 навигационные кнопки размером 196 x 60 с 2 пикселями между 1-м, 2-м и 3-м и 4-м"

Чтобы дать хороший совет, разместите ваш код на jsfiddle.netи отправьте нам ссылку, чтобы мы могли помочь проверить.Но из головы я могу добавить:

  1. Чтобы отобразить элементы списка по горизонтали и установить размеры 196 x 60, установите для отображения: block, float: left... и установить высоту и ширину.Добавьте text-align: center, чтобы он центрировал текст.

  2. Чтобы сделать текст также центрированным по вертикали, я думаю, вам нужно установить высоту строки для внутренней высоты liэлемент, а затем добавьте vertical-align: middle тоже.

Мы сможем помочь лучше, если ваш код доступен для просмотра и тестирования на jsfiddle.net

...