Question

我目前正在处理需要成为链接的a pure CSS color palette。我使用无序列表创建了这个调色板，然后将其包含在<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;
}

Answer 1

您无法在锚点中放置列表。

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

<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事件时，您不需要它们。

Answer 2

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

Answer 3

点击后你想做什么？点击被点击时你是否使用了javascript事件？

Answer 4

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

.color-chips:hover {
    cursor:pointer;
}

如何使列表可点击？

4 个答案: