Question

这是我目前的HTML：

<div style="height:50px; width:1200px">

    <div tabindex="0" class="banner" onclick="location.href='Home.html'">
        Link1
    </div>

    <div tabindex="0" class="banner" onclick="location.href='Page 1.html'">             
        Link2
    </div>

    <div tabindex="0" class="banner" onclick="location.href='Page 2.html'">
        Link3
    </div>

    <div tabindex="0" class="banner" onclick="location.href='Page 3.html'">
        Link4
    </div>

</div>

我目前的CSS：

.banner {
    background: orange;
    color: aqua;
    float: left;
    width: 24%;
    height: 50px;
    vertical-align: top;
    border: 1px solid #000000;
    text-align: center;
    font-family: Garamond;
    font-size: x-large;
    display: table-cell;
    vertical-align: middle;
    line-height:50px;
    cursor:pointer;
    font-weight:bold;
}

如何使用css将孤儿s设置为沿着父级等间隔？我已经将每个孤儿设置为父母的24％，因为当它们被设置为25％时，最右边的下降（我认为由于边界占用了额外的空间）。我使用父母的百分比，因为缩小，最右边下降，但这是由于缩放而改变的网页的唯一部分。我尝试将孤儿的边距设置为自动，但这不起作用，更改浮动导致它们的宽度减小。

更新：我意识到我应该要求父母两端的两个s位于它的最末端，而两个内部s在剩余的间隙中间隔相等。

修正：孤儿的边框增加了宽度。我选择取消边界，因为无论如何网页看起来都更好。

Answer 1

Css代码：

 .banner {
        background: orange;
        color: aqua;
        box-sizing: border-box;/*Added New Style*/
        float: left;
        width: 25%;
        height: 50px;
        vertical-align: top;
        border: 1px solid #000000;
        text-align: center;
        font-family: Garamond;
        font-size: x-large;
        display: table-cell;
        vertical-align: middle;
        line-height:50px;
        cursor:pointer;
        font-weight:bold;
    }

你的横幅有1px border，这就是为什么没有合适的原因。

DEMO

如何在父<div>中同样分配相同大小的<divs？</div> </div>

1 个答案: