logo标签列表

<div>标签宽度设置为100%时实际上比页面更宽。

htmlcss
4

我正在开发一些代码，使用div和table来渲染数据块。表格元素按预期呈现，但div的宽度超出了页面。下面的示例代码是我的项目中产生问题的最小代码选择。正如您所看到的，这两个元素都使用相同的类“contentblock”来指定100％的宽度。Chromium版本25.0.1364.160 Ubuntu 12.04（25.0.1364.160-0ubuntu0.12.04.1）。

<html><body>
<style>
    .contentblock {
        width: 100%;
        border: 1px solid #000;
        padding: .5em;
    }
    p {
        margin-bottom: 1em;
    }
</style>

<div class="contentblock">
    <p><span class="label">LOREM IPSUM SIC DOLOR</span></p>

    <p>Praesent aliquam varius dolor. Vestibulum at sem sed augue interdum condimentum eget ornare urna. Nullam blandit auctor bibendum. Cras hendrerit iaculis venenatis. Curabitur interdum, lorem quis feugiat interdum, urna sapien ultricies nisl, in pretium diam arcu ac eros. Fusce elit tellus, euismod at aliquet non, pulvinar at sapien. Aliquam molestie ante in augue convallis a malesuada nulla posuere. Aliquam blandit massa a eros viverra semper. </p>
</div>
<table class="contentblock">
    <tr>
        <th class="label"><span class="label">Lorem</span></th>
        <th class="checkbox"><span class="label">Ipsum</span></th>
        <th class="checkbox"><span class="label">Dolor</span></th>
        <th class="checkbox"><span class="label">Aliquam</span></th>
        <th class="initialbox"><span class="label">Dictum</span></th>
    </tr>
</table>
</body></html>
just remove > padding: .5em; - Shivanshu
4个回答
9
边框导致你的div更宽，使用盒模型：http://css-tricks.com/the-css-box-model/ 
.contentblock {
      width: 100%;
      border: 1px solid #000;
      padding: .5em;
     -moz-box-sizing: border-box; 
     -webkit-box-sizing: border-box; 
      box-sizing: border-box;
}

但是你应该使用一些CSS重置样式表，比如normalize：

http://necolas.github.io/normalize.css/

并/或者应用全局盒子模型：

*, *:before, *:after {
    -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}
0
首先将 body 和 html 的边距重置为 0：
body, html {
    margin:0;
}

接下来使用box-sizing属性，这样你的边框就不会增加元素的宽度：

.contentblock {
    width: 100%;
    border: 1px solid #000;
    padding: .5em;
    // Add the next 3 lines
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
}
0

这里有一个 jsfiddle，可以帮助你看到可以更改的内容：jsfiddle

首先我更改的是在你的 body 中添加了 margin: 0;：

body { margin:0; }

然后我加入了box-sizing来解决width: 100%和padding:.5em的问题

.contentblock {
    box-sizing:border-box;
    -moz-box-sizing:border-box;
}
0
在默认的CSS盒模型中，即box-sizing: content-box，元素的padding和border会被添加到指定的width中，因此你的.contentblock div实际上是窗口的100%加上1em的padding和2px的边框（左右）- 所以它比视口宽1em+2px。
你可以通过切换到border-box盒模型（将box-sizing: border-box CSS属性添加到元素中）来轻松解决这个问题。在border-box模型中，填充和边框是从显式宽度中减去而不是添加到其中。
如果你想让所有东西都使用减法的border-box CSS盒模型而不是加法的content-box默认值，只需将以下内容添加到你的CSS中： * { box-sizing: border-box } 这实际上是一种更直观的布局方法，可以帮助避免很多大小和位置方面的问题。我在过去两三年里为每个网站都使用了这个方法。

Paul Irish有一篇很棒的博客文章更深入地讨论了这个问题。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接