造型 <li> 与背景图像 <ul>

Question

我正在为网站设置页脚，并使用具有三个列表项的无序列表，如下所示：

<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;
}

两个问题-为什么这不起作用？ 有没有更好/更简便的方法可以做到这一点？

Answer 1

要使li元素以水平方式显示，可以进行两项更改。

首先，从ul删除display: inline ：

#socialnav {
    line-height: 42px;
}

其次，设置li元素的样式以使其浮动并使用display: block ：

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

请注意，添加了width和border指令以允许元素显示在图像不可用的页面上。 您可以根据需要将其删除。

JSFiddle在这里 。

Answer 2

1. 您可能看不到图像，因为列表项为空，因此它们的宽度不足以查看图像，或者图像的路径不正确。

2. 使用类而不是ID。 因此，您可以根据需要在同一页面中再次使用这些图标。 也可以使用list-style : none一次，不应用于<ul>元素和background-position: no-repeat; height: 42px; background-position: no-repeat; height: 42px; 一次，应用于每个<li> 。 另一个改进是使用Sprite图像，将所有图标包含在一个文件中（这样可以避免过多的服务器请求并减小整体图像大小）

Answer 3

首先，我将确保您的CSS在正确的位置查找图像。 网址必须相对于CSS文件，而不是网站根目录。

其次，我会加一个  在您的<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/

Answer 4

如下更新代码

<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;
  }

Answer 5

首先，不确定为什么要使用#socialnav display：inline ...这真的没有意义。

第二，您应该在li的内部放置锚点，以使这些社交链接可点击。 然后，应将这些锚点显示为：block，并将其用作处理图标大小的一种方法。

确保指定了一些宽度！