Стиль <li>с фоновыми изображениями в <ul> - PullRequest
Новая
       2

Стиль <li>с фоновыми изображениями в <ul>

1 голос
/ 23 февраля 2012

Я настраиваю нижний колонтитул для сайта и использую неупорядоченный список с тремя элементами списка следующим образом: 

<ul id="socialnav">
    <li id="facebook"></li>
    <li id="twitter"></li>
    <li id="googleplus"></li>
</ul>

Я пытаюсь использовать фоновые изображения для элементов списка для отображения в социальных сетяхзначки, а затем я хотел бы применить состояние наведения на элемент списка для кнопки «в состоянии».Тем не менее, мои три иконки не будут отображаться в списке горизонтально.Вот мой css: 

#socialnav {
display: inline;
line-height: 42px;
}

#facebook {
background-image: url("images/fb.png");
background-repeat: no-repeat;
list-style-type: none;
height: 42px;
}

#twitter {
background-image: url("images/twt.png");
background-repeat: no-repeat;
list-style-type: none;
height: 42px;
}

#googleplus {
background-image: url("images/gplus.png");
background-repeat: no-repeat;
list-style-type: none;
height: 42px;
}

Два вопроса - почему это не работает?И есть ли лучший / более простой способ сделать это?

Ответы [ 5 ]

2 голосов
/ 23 февраля 2012

Чтобы элементы li отображались горизонтально, вы можете внести два изменения.

Сначала удалите display: inline из ul: 

#socialnav {
    line-height: 42px;
}

Во-вторых, стиль li элементов плавать и использовать display: block: 

#socialnav li {
    display: block;
    float: left;
}

Обратите внимание, что были добавлены директивы width и border, чтобы на странице отображались элементы, изображения которых недоступны. Вы можете удалить их по мере необходимости.

JSFiddle здесь .

1 голос
/ 23 февраля 2012

Обновите ваш код, как показано ниже 

<ul id="socialnav">
<li id="facebook">&nbsp;</li>
<li id="twitter">&nbsp;</li>
<li id="googleplus">&nbsp;</li>
</ul>​

Изменить CSS на 

#socialnav {
display: inline;
 line-height: 42px;
   }

  #facebook {
  background: url("images/fb.png") no-repeat;
  list-style-type: none;
   height: 42px;
    }

   #twitter {
   background: url("images/twt.png") no-repeat;
  list-style-type: none;
   height: 42px;
   }

 #googleplus {
  background: url("images/gplus.png") no-repeat;
  list-style-type: none;
  height: 42px;
  }
1 голос
/ 23 февраля 2012

Для начала я бы убедился, что ваш CSS ищет изображения в нужном месте. URL должен относиться к файлу CSS, а не к корню сайта.

Во-вторых, я бы добавил &nbsp; в ваши теги <li>, чтобы убедиться, что они не выглядят пустыми.

Код работает иначе. 

 #facebook {
     background-image: url("http://www.moifacebook.ru/wp-content/themes/atenta12/sections/branding/facebook.png");
     background-repeat: no-repeat;
     list-style-type: none;
     height: 42px;
}  

<ul id="socialnav">
        <li id="facebook">&nbsp;</li>
        <li id="twitter">&nbsp;</li>
        <li id="googleplus">&nbsp;</li>
    </ul>​

http://jsfiddle.net/spacebeers/yQzDy/

1 голос
/ 23 февраля 2012

  1. Возможно, вы не видите изображения, потому что ваши элементы списка пусты, поэтому они недостаточно широки для просмотра изображений, или путь к изображениям неправильный.

  2. Используйте классы вместо идентификаторов. Таким образом, вы можете повторно использовать значки снова на той же странице, если это необходимо. Используйте также list-style : none один раз, примените к элементу <ul> и background-position: no-repeat; height: 42px; один раз, примените к каждому <li>. Другим улучшением может быть использование спрайт-изображения, содержащего все значки в одном файле (чтобы избежать слишком большого количества запросов к серверу и уменьшить общий размер изображения)

0 голосов
/ 23 февраля 2012

Прежде всего, не уверен, почему вы делаете #socialnav display: inline ... это действительно не имеет смысла.

Во-вторых, вы должны поместить якорь в свои библиотеки, чтобы сделать эти социальные ссылки кликабельными. Затем вы должны заставить эти якоря отображать: блокировать и использовать их как способ обработки размеров значков.

Убедитесь, что указана некоторая ширина!

...