Question

我想用图片替换列表项。

我想要替换的列表项是第一个列表项class =＆＃34; main-logo＆＃34;。

我的问题如下。

1.我是否在.main-logo或.logo上进行替换？ 2.用图像替换列表项的最佳技术是什么？ 3.如果我想调整列表项的行高，我可以调整li类，导航类或类吗？

谢谢！

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

Answer 1

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

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

用图像替换列表项的最佳技巧是什么？

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

如果我想调整列表项的行高，我可以调整li类，导航类或类吗？

li课程，因为您要调整（和我引用） “列表项”。

Answer 2

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

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

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

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

<强> 3。如果我想调整列表项的行高，我可以调整li类，导航类或类吗？

无所谓，但我个人会a，因为它是最具体的。

Answer 3

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类，导航类或类吗？

再次，li element。如果你想要定位一个元素，那就是你需要设计的样式。想一想：如果你里面没有a element怎么办？如果导航有另一种风格（它可能会）会怎么样？所以，再次，只需设计您需要设计风格的元素。 99％的CSS情况都是如此。

用图像替换列表项

3 个答案: