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元素以水平方式显示，您可以进行两项更改。

首先，从display: inline

中删除ul

#socialnav {
    line-height: 42px;
}

其次，将li元素设置为浮动并使用display: block：

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

请注意，添加了宽度和边框指令，以允许元素显示在图像不可用的页面上。您可以根据需要删除它们。

JSFiddle here

Answer 2

可能您没有看到图像，因为您的列表项是空的，因此它们的宽度不足以查看图像，或者图像的路径不正确。
使用类而不是id。因此，如果需要，您可以在同一页面中重新使用图标。还可以使用list-style : none一次，应用于<ul>元素和background-position: no-repeat; height: 42px;一次，应用于每个<li>。另一项改进可能是使用精灵图像，其中包含单个文件中的所有图标（以避免过多的服务器请求并减少整体图像大小）

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显示：内联...这真的没有意义。

其次，你应该在你的li中放置一个锚点，以使这些社交链接可以点击。然后你应该显示这些锚点：阻止并使用它们作为处理图标大小的方法。

确保指定了一些宽度！

使用<ul> </ul> </li>中的背景图像为<li>设置样式

5 个答案: