怎么解决这个？ []

Question

为什么会出现这个问题。我在Hoursdiv中添加了一个标签元素（数字）到 动态但问题是： - 元素没有以适当的方式添加。之后添加6
元素，空间创造。

javascript代码： -

for(var i=1 ; i<=12; i++) {
    (function () {
        var cc=i;

        if(cc<=9)
            cc='0'+i;

        var _id1 = "time"+cc;
        str1 += "<a  id='"+_id1+"' class='hournum a_Cal' >"+cc+"</a>";
    }());
}

css代码（ h2ooooooo编辑说明：我不知道'a_cal'实际上是否在css文件中，但是我将它保存在这里以防）：

'a_cal'
.a_Cal{
    text-decoration: none;
    color: black;
    width: 18%;
    height: 11%;
    float: left;
    border-radius: 4px;
}
.hournum{
    padding:5px;
}
.hoursdiv{
    border: 1px solid #6699FF;
    position: absolute;
    top: 25%;
    left: 4%;
    text-align: center;
    color: red;
    width: 45%;
    height: 52%;
    background-color: white; 
}

Answer 1

嗯，看着你的代码，我觉得很脏 如果您的问题是容器右侧的空间，那么让我解释一下发生了什么。

空间存在的原因是因为第6个元素太宽而不能停留在同一个“行”上，它会被推到下一行。它太宽的原因是因为在你的css中结合使用％-width和padding，它永远不会结束。

插图

我已经构建了一个我认为你希望它看起来如何的例子。 我也稍微清理了你的代码;）

---

Example |代码

在这个例子中，我使用绝对值而不是百分比。这样做的好处是我可以计算出我的容器所需的确切宽度 链接的宽度是宽度+填充+边距+边框的总和：

40 + (5*2) + (2*2) + (1*2) = 56 px

我们希望每个“行”有5个链接

56 * 5 = 280 px

因此容器的宽度必须至少为280px，以便每行5个链接。

• CSS

.hournum{
    text-decoration: none;
    color: black;
    width: 40px;
    float: left;
    padding: 0px 5px;
    text-align: center;
    color: red;
    border-radius: 3px;
    border: 1px solid black;
    margin: 2px 2px;
 }

.container{
    position: absolute;
    top: 10px;
    left: 10px;
    width: 280px;
    background-color: white;
    border: 1px solid #6699FF;
    padding: 2px;
}

• 的Javascript

var str = "";

for(var i=1 ; i<=12; i++){
    var cc = i;
    var row

    if(i <= 9) cc = "0" + i

    str += '<a href="#" id="time_'+cc+'" class="hournum">'+cc+"</a>";
 }

document.body.innerHTML = '<div class="container">'+str+"</div>";

结果