Question

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

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

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

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

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

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>

Answer 1

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

我的建议是从你的手中删除填充物并将填充物添加到你的脸上。这将强制用于查看子弹的间距位于您的标签内，并且可以点击＆＃34;。

Answer 2

为了让它按照您描述的方式工作，请尝试使用

display：inline-block;

并更改左侧填充/边距如下：

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

Answer 3

添加

#navlist li {
list-style-position: inside;
}

Answer 4

只需设置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);
}

Answer 5

我不确定您是否尝试这种方式移动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);
}

工作demo祝希望这个帮助

Answer 6

有多种方法可以实现您的目标：

1。李的方式（不建议）

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

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

BOTTOMNOTICE

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

有很多不同的方式来设置导航链接的样式。有惯例和良好的编码，但它不是一个法律。很多时候，偏离标准的人都是新的创新者。

如果你的导航包含两个链接，那么创建一个ul，li和一个是不值得的，而你可以做得更快，并且具有与之相同的质量？

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

使自定义子弹图像成为可点击链接的一部分

6 个答案:

1。李的方式（不建议）

2。优先方式（建议）

3。好的方式

4。叛逆的方式

BOTTOMNOTICE