文章/答案/技术大牛

发布

社区首页 >问答首页 >css:元素在使用框大小时仍然宽。

问css:元素在使用框大小时仍然宽。
EN

Stack Overflow用户

提问于 2014-03-22 08:29:01

回答 1查看 53关注 0票数 1

我试图在一个部分中显示一个列表。我使用的宽度/高度设置为100%结合box-sizing: border-box，但由于原因，我不明白的事情仍然是太宽。所讨论的html如下所示：

<main>
    <section scrumboard="" class="scrumboard">
        <ol class="lanes">
            <li class="lane droppable">
                <h1 class="lane-title">todo</h1>
            </li>
            ....

        </ol>
    </section>
</main>

和CSS：

html,body,main,section {
    height: 100%;
    width: 100%;
    overflow: hidden;
    box-sizing: border-box;
}

body {
    padding: 20px;
}

 .scrumboard {
     background-color: #aaa;
 }

 .lanes {
     box-sizing: border-box;
     display: flex;
     flex-wrap: nowrap;
     font-size: 0;
     height: 100%;
     list-style-type: none;
     margin: 50px 0 0;
     padding: 0px;
 }

 .lane {
     height: 100%;
     border: 1px dashed black;
     margin: 0 5px 10px 5px;
     box-sizing: border-box;
     display: inline-block;
     text-align: center;
     flex: 1 100%;
 }

 .lane-title {
     font: 100 20px/40px 'Titillium Web';
     margin-top: -35px;
     color: #253248;
     text-transform: uppercase;
 }

这里是一个小提琴，因此，我不明白为什么body元素上的填充在右侧下降，为什么li元素要长(底部的边框不可见)。有什么建议吗？

html

css

回答 1

Stack Overflow用户

回答已采纳

发布于 2014-03-22 08:39:51

首先，我应该注意到，web浏览器通常在<body>元素上应用一个<body>。由于在计算框的width/height时不包括边距，所以必须通过以下方法删除：

body { margin: 0; }

所以第一个问题是会被修正。

其次，由于<li>元素(它们的容器)顶部的50px边距，完全高度的.lanes项被向下推。

可以使用CSS3 calc()函数对高度 of li.lane元素进行修复，如下所示：

.lane {
    height: calc(100% - 50px);
}

这里的例子

由于您使用的是柔性盒来进行布局，从浏览器支持的角度来看，使用calc()似乎不错。

票数 2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/22575273

复制

相似问题

问css:元素在使用框大小时仍然宽。
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问css:元素在使用框大小时仍然宽。EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问css:元素在使用框大小时仍然宽。
EN