鉴于此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解决吗？
这div是典型的块级元素,span而是内联对应元素.它们是该显示类型的最简单形式,没有其他属性.在很多情况下,我会给他们任何一种风格:
display: inline-block;
这使得他们表现得非常方便.因为div它意味着盒子可以轻松地彼此相邻,同时保持其定义的宽度和高度.因为span我可以用它来制作彩色矩形.该inline-block显示器是伟大的事情太多了,但我从来没有见过,作为一个开始元素inline-block没有别的事情.
图像(img)是,但它们显然不适合与a相同的东西div,它们具有那种风格,但它们实现了不同的目的.
那么有一个我不知道的元素是典型的inline-block,还是遗漏了？
如果没有,为什么？使用inline-block很多,所以似乎应该有一些元素采用这种基本形式.
好的,这实际上有点复杂.
我有一个列表项目设置的导航列表inline-block.项目数是列表是动态的,因此可能会有所不同.
我的目标是让列表项跨越容器的整个宽度.(例如,如果有4个列表项,每个列表项占据容器宽度的25%[忽略边距/填充等])
还有一个复杂的问题是,浏览器似乎为内联块元素添加了4px的余量,其中它们之间有空格(换行符/空格等).
我做了一个小提琴作为起点,有两个例子:第一个是内联块模式中的列表项,第二个证明它们在宽度上对齐.
既没有实现我想要的东西,整个宽度被元素占据而没有它们分成另一条线.
编辑:稍微分开,但为什么在我的第二个例子中lis 下方有一个空格,请注意我将行高和字体大小设置为0的事实？
好的,我在理解float属性的行为时遇到了问题.
页面宽度为750像素.为了使它位于屏幕的中心,我使用了以下代码:
<div align="center">
<div align="left" style="width:750px; border-style:double;">
stuff
</div>
</div>
主750 px宽容器中的元素是具有以下样式的其他容器:
div.infoCont //these containers usualy have two more containers within- for an image and text
{
width: 740px;
position: relative;
left: 2px;
border-style: double; //for debugging
float: left;
}
div.textContNI //text only
{
width: 730px;
float: left;
clear: right;
border-style: double; //for debugging
}
小容器表现正常(它们应该是,因为它们的位置和我想要的方式一样大).但是主容器的高度比较小的容器的总高度少了很多...... 0 px.它忽略了所有较小容器的高度.
这可以通过在主容器的结束标记之前添加文本来"修复".我还可以使用<br>标签操作高度而不使用文本:高度变得与边框的总高度一样大.另一种"修复"问题的方法是添加float:left;样式,但是将容器放在窗口的左侧,我不能拥有它.
我错过了什么,我不知道它是什么.
为什么主容器会忽略其中容器的总高度,我该如何处理这个错误呢？