鉴于此HTML和CSS:
span {
display:inline-block;
width:100px;
background-color:palevioletred;
}<p>
<span> Foo </span>
<span> Bar </span>
</p>结果,SPAN元件之间将存在4像素宽的空间.
演示: http ://jsfiddle.net/dGHFV/
我理解为什么会发生这种情况,而且我也知道我可以通过删除HTML源代码中SPAN元素之间的空白来摆脱那个空间,如下所示:
<p>
<span> Foo </span><span> Bar </span>
</p>
但是,我希望CSS解决方案不要求HTML源代码被篡改.
我知道如何用JavaScript解决这个问题 - 通过从容器元素(段落)中删除文本节点,如下所示:
// jQuery
$('p').contents().filter(function() { return this.nodeType === 3; }).remove();
演示: http ://jsfiddle.net/dGHFV/1/
但是这个问题可以单独用CSS解决吗？
我正在使用弹性框显示8个项目,这些项目将动态调整我的页面大小.如何强制它将项目分成两行？(每行4个)？
这是一个相关的剪辑:
(或者,如果你更喜欢jsfiddle - http://jsfiddle.net/vivmaha/oq6prk1p/2/)
.parent-wrapper {
height: 100%;
width: 100%;
border: 1px solid black;
}
.parent {
display: flex;
font-size: 0;
flex-wrap: wrap;
margin: -10px 0 0 -10px;
}
.child {
display: inline-block;
background: blue;
margin: 10px 0 0 10px;
flex-grow: 1;
height: 100px;
}<body>
<div class="parent-wrapper">
<div class="parent">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
</div>
</body>我有这个HTML代码:
<body>
<div id="div0" style="display:inline; background-color:green; width:100%">
<div id="div1" style="display:inline; background-color:aqua;width:33%"> </div>
<div id="div2" style="display:inline; background-color:red;width:33%"> </div>
<div id="div3" style="display:inline; background-color:yellow;width:33%"> </div>
</div>
</body>
我想用div1,div2和div3填充页面,但它们不会填满整个宽度.
它发生了什么？