Question

我有以下内容：

<div id='hdr_thm'>
    <div>
        <a style="background-color: #FFFFFF;" href="#" data-style="arctic" title="Arctic"></a>
        <a style="background-color: #F2F2F2;" href="#" data-style="aristo" title="Aristo"></a>
        <a style="background-color: #E6E6E6;" href="#" data-style="black-tie" title="Black Tie"></a>
        <a style="background-color: #CCCCCC;" href="#" data-style="blitzer" title="Blitzer"></a>
        <a style="background-color: #808080;" href="#" data-style="cobalt" title="Cobalt"></a>
    </div>
    <div>
        <a style="background-color: #FCEE21;" href="#" data-style="flick" title="Flick"></a>
        <a style="background-color: #D9E021;" href="#" data-style="hot-sneaks" title="Hot Sneaks"></a>
        <a style="background-color: #8CC63F;" href="#" data-style="humanity" title="Humanity"></a>
        <a style="background-color: #009245;" href="#" data-style="le-frog" title="Le Frog"></a>
        <a style="background-color: #006837;" href="#" data-style="midnight" title="Midnight"></a>
    </div>

... etc

</div>

#hdr_thm {
    margin: 0;
    position: absolute;
    right: 10px;
    top: 15px;
    z-index: 20;
}

#hdr_thm a {
    border: 1px solid #050505;
    cursor: pointer;
    display: block;
    float: left;
    height: 10px;
    margin: 0;
    width: 10px;
}

我想做的是在这里有两行。每行有五个<a>元素。但问题对我来说，我怎么能让行环绕，以便下面的五个方块出现前五个。

Answer 1

尝试添加一个清除：左边的div：

#hdr_thm div {
    clear:left;
}

您的原始代码适用于Chrome。使用上面的代码，它也适用于IE。

Answer 2

Alternativley你可以使用

display: inline-block;

而不是

display: block;
float: left;

注意：Internet Explorer 6不支持“inline-block”作为值，因此您可以使用简单的“inline”，它具有与更高版本或其他浏览器中的inline-block相同的行为。当然，只要你想支持它。

Answer 3

如果您希望两行中的5个链接中的每个链接都准确对齐，那么在这种情况下使用表实际上可能是最佳解决方案。

否则，请确保两个内部div相对于彼此定位，这可以解决您的问题。

如何制作十<a> links appear as two rows of five?</a>

3 个答案: