1

我正在尝试使用自定义项目符号图像在 CSS 中编写水平导航菜单。

我可以让大多数事情正常工作，但问题是自定义项目符号图像（每个导航项都不同）不是可点击链接的一部分。

我知道我可以将 A 标签移到 LI 标签之外，但这是一种糟糕的编码习惯。

有谁知道如何使自定义项目符号图像成为可点击链接的一部分？我的直觉是确保显示：块，但随后它弄乱了水平布局。

这是我到目前为止所得到的：

CSS：

#navlist {
    list-style: none;
    margin: 0;
    padding: 20px 0 0px 20px;
}

#navlist ul {
    margin: 0;
    padding: 0;
}

#navlist li {
    display:inline;
    background-repeat: no-repeat;
    background-position: 0 50%;
    padding: 3px 0 3px 35px;
    margin: 0 20px 0 .4em;
}

#navlist li a {
    text-decoration:none;
}

#navlist li.contact {
    background-image: url(img/contact.png);
}

#navlist li.about {
    background-image: url(img/about.png);
}

HTML：

<ul id="navlist">
    <li class="contact"><a href="#">Contact Us</a></li>
    <li class="about"><a href="#">About Us</a></li>
</ul>
4

6 回答 6

1

要让它按照您的描述工作，请尝试使用

显示：内联块；

并更改左填充/边距，如下所示：

#navlist li {
    display: inline-block;
    background-repeat: no-repeat;
    background-position: 0 50%;
    padding: 3px 0 3px 0;
    margin: 0 20px 0 .4em;
}
#navlist li a {
    text-decoration: none;
    padding-left: 35px;
}
于 2013-03-19T23:24:42.290 回答
1

有不同的方法可以实现您想要的：

1. THE LI WAY（不建议）

<ul id="navlist">
<li class="contact"><a href="#">Contact Us</a></li>
<li class="about"><a href="#">About Us</a></li>
</ul>

在这种情况下，li a {float:right; width:<fixedwidthforall>;}。所以你必须给所有的锚定一个固定的宽度，让它们向右浮动，并确保背景图像li可见。很多麻烦，而且你将很难在:hover.

2. 首选方式（建议）

<ul id="navlist">
<li><a href="#" class="contact">Contact Us</a></li>
<li><a href="#" class="about">About Us</a></li>
</ul>

最常见的做法是在您的锚点上放置一些填充并将其移动 background-image到锚点（而不是 li 的）。这意味着也将类移动到锚点。

3. 好的方式

<div id="navlist">
<a href="#" class="contact">Contact Us</a>
<a href="#" class="about">About Us</a>
</div>

对于一个完全不需要可扩展导航的小型网站，具有以下样式的锚点的 div 就可以了。无需不必要地使事情复杂化。

<style>
#navlist a {
display: block;
float: left;}
</style>

4. 反叛之路

如果您想做一些非传统的、叛逆的事情，请选择这种标记：

<ul id="navlist">
<li><a href="#" class="contact">Contact Us
<img src=""></img></a></li>
<li><a href="#" class="about">About Us
<img src=""></img></a></li>
</ul>

为什么不在导航链接中添加图像呢？或者为什么不将整个页面作为 adisplay:none并在悬停时显示。没有人这样做，但总要有先驱者！

底部通知

“我知道我可以将 A 标签移到 LI 标签之外，但这是一种糟糕的编码习惯。”

有很多不同的方式来设置导航链接的样式。有约定和良好的编码，但这不是法律。通常，偏离标准的人是新的创新者。

如果您的导航包含两个链接，那么创建 ul、li 和 a 的麻烦是否值得，而您可以做得更快，并且与 a 具有相同的质量？

PS：类用于重复元素，id 用于唯一元素。除非您在其他元素上重新使用相同的样式，否则它们应该是 id 的......但同样，这是一个约定。你可以自由选择！

于 2013-03-20T02:41:42.600 回答
1

我假设您的自定义项目符号是您应用到#navlist li.contact和的背景图像#navlist li.about。

我的建议是从您的 li 中删除填充并将填充添加到您的 a 中。这将强制用于查看项目符号的间距位于您的标签内并且“可点击”。

于 2013-03-19T23:18:05.773 回答
0

我不确定你是否尝试这种方式搬进background-image来<a>

#navlist {
    list-style: none;
    margin: 0;
    padding: 20px 0 0px 20px;
}

#navlist ul {
    margin: 0;
    padding: 0;
}

#navlist li {
    display:inline;

}

#navlist li a {
    text-decoration:none;
    background-repeat: no-repeat;
    background-position: 0 50%;
    padding: 3px 0 3px 35px;
    margin: 0 20px 0 .4em;
}

#navlist li.contact a{
    background-image: url(img/contact.png);
}

#navlist li.about a{
    background-image: url(img/about.png);
}

工作演示
希望这有帮助

于 2013-03-20T01:54:32.620 回答
0

只需设置 a 而不是 li 的样式并将背景图像应用到它。这也更具语义性。更改后的代码将是：

#navlist li {
    display:inline;
}

#navlist li a {
    text-decoration:none;
    background-repeat: no-repeat;
    background-position: 0 50%;
    padding: 3px 0 3px 35px;
    margin: 0 20px 0 .4em;
    display: inline-block; // to make the padding work
}

#navlist li.contact a {
    background-image: url(img/contact.png);
}

#navlist li.about a {
    background-image: url(img/about.png);
}
于 2013-03-19T23:20:31.443 回答
0

添加

#navlist li {
list-style-position: inside;
}
于 2013-03-19T23:18:01.257 回答