-6

为什么会出现这个问题。我通过动态在 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; 
}
4

1 回答 1

0

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

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

插图

示范

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

示例| 代码

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

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

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

56 * 5 = 280 px

所以容器的宽度必须至少为 280 像素，以适应每行 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>";

结果

结果

于 2013-09-20T13:44:45.210 回答