用图片替换列表项答案

【问题标题】：Replace list item with image用图片替换列表项
【发布时间】：2014-08-30 03:35:18
【问题描述】：

我想用图片替换列表项。

我要替换的列表项是第一个列表项 class="main-logo"。

我的问题如下。

1.我是在 .main-logo 上还是在 .logo 上进行替换？ 2.用图像替换列表项的最佳技术是什么？ 3.如果我想调整列表项的行高，我是调整li类，nav类还是a类？

谢谢！

http://jsfiddle.net/codermax/fe0L3d08/4/

<nav class = "side-bar">
        <ul class ="main-bar">
            <li class="logo"><a href="#" class="main-logo">Logo</a></li>
            <li class="user-nav"><a href="#" class="big-box">User</a></li>
            <li class="main-nav"><a href="#">Home</a></li>
            <li class="main-nav"><a href="#">Visitor List</a></li>
            <li class="main-nav"><a href="#">Visualization</a></li>
            <li class="main-nav"><a href="#">History</a></li>
            <li class="divider-nav"><a href="#">Manage</a></li>
            <li class="manage-nav"><a href="#">Agents</a></li>
            <li class="manage-nav"><a href="#">Departments</a></li>
            <li class="manage-nav"><a href="#">Shortcuts</a></li>
            <li class="manage-nav"><a href="#">Banned Visitors</a></li>
            <li class="manage-nav"><a href="#">Triggers</a></li>
            <li class="divider-nav"><a href="#">Settings</a></li>
            <li class="settings-nav"><a href="#">Widgets</a></li>
            <li class="settings-nav"><a href="#">Personal</a></li>
            <li class="settings-nav"><a href="#">Accounts</a></li>
        </ul>
   </nav>

css 代码。

.main-bar li a {
    display: block;
    width: 100%;
    height: 100%;
    padding: auto 0;
    margin: auto 0;
    line-height: 2.5em;
    text-decoration: none;
    color: white;
    text-align: center;
 }

article {
    width: 60%;
    height: 30%;
    float: right;
    position: relative; 
}

.logo {
    height: 4em;
}

a.main-logo {
    background: url(zopim.jpg) no-repeat;
    display: block;
    height: 100%;
    top: 0;
    left: 0;
}

a.big-box {
    line-height: 7em;
    height: 7em;
}

【问题讨论】：

标签： css html navigationbar image-replacement

【解决方案1】：

1.我是在 .main-logo 上还是在 .logo 上进行替换？

我会亲自在.main-logo 上执行此操作，因为您将a 标签设置为阻止并且可以更好地控制它。而且是最具体的。

2.用图片替换列表项的最佳技术是什么？

你如何在你的 CSS 中拥有它。然后将line-height 设置为非常高的值（例如999em）并设置overflow:hidden。

3.如果我想调整列表项的行高，我是调整 li 类、nav 类还是 a 类？

没关系，但我个人会使用a，因为它是最具体的。

【讨论】：

【解决方案2】：

1.我是在 .main-logo 上还是在 .logo 上进行替换？

.logo，当然，你想要设置 li 的样式，所以这就是你需要定位的目标

2.用图片替换列表项的最佳技术是什么？ 它因一个开发人员而异，但我个人最喜欢的，我认为最常用的一个是背景技术。像这样：

li{list-style-type:none; padding-left:30px; background: transparent url(bullet.png) no-repeat 50% 0; background-size:100% auto /* this could vary depending on your needs */}

3.如果我想调整列表项的行高，我是调整 li 类、nav 类还是 a 类？

再次，li element。如果你想定位一个元素，那就是你需要的样式。想一想：如果 li 中没有a element 怎么办？如果导航有另一种风格（可能会）怎么办？所以，再次，只需设置您需要设置样式的元素。这在 99% 的 CSS 情况下都是正确的

【讨论】：

【解决方案3】：

我是在 .main-logo 上还是在 .logo 上进行替换？

在.logo 上执行此操作，因为它是列表项。

用图片替换列表项的最佳技术是什么？

如果要替换列表项的内容。从单词logo 到图像，然后将其替换为<img> 元素。除了你正在处理的导航栏之外，你很可能每页只有一个导航栏，所以如果你不使用 CSS 也可以。

如果我想调整列表项的行高，我是调整 li 类、nav 类还是 a 类？

li 类，因为它是您想要调整的（我引用）“列表项”。

【讨论】：