0

我目前正在研究一个需要作为链接的纯 CSS 调色板。我使用无序列表创建了这个调色板，然后将其包装在<a>标签中。我怀疑这不是很语义化。实现这一目标的正确方法是什么？

HTML

<div class="color-palette">
<a href="#">Modern Feminine</a>
<a href="#">
    <ul class="color-chips group">
        <li class="grey">#999999</li>
        <li class="slate">#666666</li>
        <li class="lilac">#99878D</li>
        <li class="blush">#7E4A5C</li>
        <li class="plum">#372129</li>
    </ul><!--.color-chips group-->
</a>
</div><!--.color-palette-->

CSS

.color-palette {
    width: 280px;
    margin: 0 auto;
    padding: 0;
}

ul.color-chips {
    margin: 0 auto;
    padding: 0;
}

ul.color-chips li {
    float: left;
    margin: 0;
}

ul.color-chips li {
    float: left;
    width: 55px;
    height: 55px;
    text-indent: -9999px;
}
4

4 回答 4

2

您不能将列表放在锚点内。

您需要使列表中的每个单独项目成为单独的链接。

<ul class="color-chips group">
        <li class="grey"><a href="">#999999</a></li>
        <li class="slate"><a href="">#666666</a></li>
        <li class="lilac"><a href="">#99878D</a></li>
        <li class="blush"><a href="">#7E4A5C</a></li>
        <li class="plum"><a href="">#372129</a></li>
    </ul><!--.color-chips group-->

如果您不需要链接，因为您实际上并没有链接到任何东西（即您正在执行页面上的操作），只需将所有锚点一起删除。附加 Javascript onclick 事件时不需要它们。

于 2012-05-02T13:52:29.833 回答
1 
<ul class="color-chips group">
    <li class="grey"><a href="javascript:;">#999999</a></li>
    <li class="slate"><a href="javascript:;">#666666</a></li>
    <li class="lilac"><a href="javascript:;">#99878D</a></li>
    <li class="blush"><a href="javascript:;">#7E4A5C</a></li>
    <li class="plum"><a href="javascript:;">#372129</a></li>
</ul>
于 2012-05-02T13:53:57.083 回答
1

点击后您想做什么？触发点击时是否使用 javascript 事件？

于 2012-05-02T13:56:05.443 回答
1

由于您已经在使用 JS 处理点击，我认为锚点纯粹是装饰性的。在这种情况下，您可以使用 CSS：

.color-chips:hover {
    cursor:pointer;
}
于 2012-05-02T14:20:51.760 回答