相关疑难解决方法(0)

鉴于此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元素,它们是相同的,彼此相邻.然而,尽管边距设置为0,但两个div之间似乎有一个4像素的神秘空间.没有父div影响它们 - 发生了什么？

CSS

#container
{
    display:inline-block;
    position:relative;
    background:rgb(255,100,0);
    margin:0px;
    width:40%;
    height:100px;
}

这就是我想要的样子:

我有一个大约10 img秒的页面.为了HTML的可读性,我想在每个img标记之间放置一个换行符,但这样做会在图像之间呈现空格,这是我不想要的.除了在标签中间而不是在它们之间打破之外,还有什么可以做的吗？

编辑:这是我到目前为止的截图.我希望书脊图像能够以随机组合显示,使用PHP.这就是我需要单独img标签的原因.

这是我到目前为止所做的:小提琴

虽然有2个问题:

1. 我硬编码每一个的宽度li来33%,这是我不希望这样做,我可以轻松地添加更多的项目.
2. 我想在每个项目之间留一些间距(背景颜色中的间隙),但是一旦我添加了一个边距,一个项目就会被撞到一条线上.我该如何解决这个问题？

#main-nav {
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
    overflow:  auto;
}
#main-nav li {
    float: left;
    width: 33%;
    height: 25px;
    text-align: center;
}
#main-nav li a {
    width: 100%;
    display: block;
    height: 100%;
    line-height: 25px;
    text-decoration: none;
    background-color: #e0e0f0;
    font-weight: bold;
    color: #021020;
}
#main-nav li a:hover {
    background-color: #498cd5;
    color: #ddeeee;
}

<ul id="main-nav">
    <li><a href="#">one</a></li>
    <li><a href="#">two</a></li>
    <li><a href="#">three</a></li>
</ul>