相关疑难解决方法(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解决吗？

我想有两列50%宽度的空间,并避免浮动.所以我想用display:inline-block.

当元素增加到99%宽度(例如50%,49%,http://jsfiddle.net/XCDsu/2/)时,它按预期工作.

当使用100%宽度(例如50%,50%,http://jsfiddle.net/XCDsu/3/)时,第二列会断开第二行.

这是为什么？

我正在使用一些div设置为display: inline-block并且有一组height和的s width.在HTML中,如果每个后面都有一个换行符,则会div在div的右下角添加一个自动5px边距.

例:

<div>Some Text</div>
<div>Some Text</div>

有没有我忽略的财产可以让我重置自动保证金？

更新

从我发现的,没有办法删除边距...除非你要么在同一行上有所有内容,或添加注释以注释掉换行符.例:

<div>Some Text</div><!--
--><div>Some Text</div>

不是最好的解决方案,但如果您有多行,仍然更容易阅读.

通常情况下,当我们想要DIVs连续使用多个时float: left,我现在会发现它的诀窍display:inline-block

示例链接在这里.在我看来,这display:inline-block是一个更好align DIVs的连续方式,但有任何缺点吗？为什么这种方法不那么流行float呢？

我有像html代码:

<div class="wrap">
    <div>
        <div id="hmenus">
            <div class="nav mainnavs">
                <ul>
                    <li><a id="nav-questions" href="/questions">Questions</a></li>
                    <li><a id="nav-tags" href="/tags">Tags</a></li>
                    <li><a id="nav-users" href="/users">Users</a></li>
                    <li><a id="nav-badges" href="/badges">Badges</a></li>
                    <li><a id="nav-unanswered" href="/unanswered">Unanswered</a></li>
                </ul>
            </div>
        </div>
    </div>
</div>

如何通过PHP删除标签之间的空白？

我们应该得到:

<div class="wrap"><div><div id="hmenus"><div class="nav mainnavs"><ul><li><a id="nav-questions" href="/questions">Questions</a></li><li><a id="nav-tags" href="/tags">Tags</a></li><li><a id="nav-users" href="/users">Users</a></li><li><a id="nav-badges" href="/badges">Badges</a></li><li><a id="nav-unanswered" href="/unanswered">Unanswered</a></li></ul></div></div></div></div>

我有一个带有一堆图像标签的div,这是一个例子:

<div style="margin: 0; padding: 0; border: 0;">
    <a href="/view/foo1"><img src="foo1.jpg" alt="Foo1" /></a>
    <a href="/view/foo2"><img src="foo2.jpg" alt="Foo2" /></a>
    <a href="/view/foo3"><img src="foo3.jpg" alt="Foo3" /></a>
</div>

因为标签之间有空格,浏览器会在图像之间显示一些空格(Chrome决定4px).我如何告诉浏览器在图像之间没有任何空格,而不是将<和<直接放在一起？我知道除了浏览器决定使用的字母间距外,字母间距也适用,所以即使是负值也没用.基本上我会在他们的主页底部找到像Twitter这样的东西.我查看了他们的代码,他们正在使用无序列表.我可以这样做,但我想要技术解释为什么似乎没有办法消除这些图像之间的空白区域.

我正在尝试创建一个水平滚动列表.当Javascript启用时,我将用一个花哨的版本替换它,但我希望标记和CSS在没有Javascript的情况下在合理的现代浏览器上看起来很好(任何以任何方式使用Javascript的建议都是关闭的).

我目前的标记/ CSS工作,但这是我不喜欢它:

• 当前标记指定了一个非常宽的ul(即10000px)和一个在其上滚动的容器.有没有办法避免这种情况,而是根据其内容扩展宽度(即蓝色背景不应该在那里)？
• 有两个外来divS(那些ID #extra1,#extra2),其仅仅是造型的目的.有没有办法消除这个额外的div？
• 如果没有足够的图像来填充页面宽度,滚动条应该会崩溃,但目前它不会因为我有一个非常宽的ul而无法折叠.
• 该<a>标签由水平列表分开,我想最好让他们在一起.有没有办法让它们靠近在一起并在CSS中干净地分开它们？

除此之外,您是否知道讨论此类事情的任何教程？我已经看过几个教程,它们展示了整个页面的滚动,我从中获取了一些想法,但我找不到任何展示滚动ul/ol元素的东西.

可能有用的额外信息:

• 页面的宽度是静态的(即它不是流体/弹性布局).
• 页面中的图像是从PHP动态生成的,图像数量可以更改.
• 缩略图的宽度是明确定义的.

剥离现场示例:http://dl.dropbox.com/u/17261360/horiz.html

看看以下小提琴:

http://jsfiddle.net/DNhAk/14/

当您有一个包含在锚/链接中的文本的图像时,图像和代码中的文本之间的空白在文本之前的呈现页面中创建带下划线的空白.

当没有图像时,即使代码中有空格,也没有带下划线的空格.

我能看到避免这个带下划线的空格的唯一方法就是消除代码中的空格.但我讨厌改变我的编码风格,以改变呈现页面的呈现方式.无论如何,改变你的HTML以操纵页面的呈现是错误的.这就像使用换行符(<br/>)在元素之间添加空格而不是使用CSS.

是否有一个不太明显的CSS属性用于解决此问题？

更新 由于某些原因,人们会挂在我在代码中的图像边框和边距上.我只把它们放在那里让它看起来不错.它们与问题无关,因此我删除了它们并更新了小提琴,以便人们可以更清楚地了解问题所在.

我对HTML的最大抱怨是换行符在元素之间增加了一点点空间.(jsFiddle.)

这可能会破坏子元素大小完全适合父母的布局.

我在某处读到你可以删除这个隐式填充 - 同时仍然保持代码有些清晰 - 通过使用这样的注释:

<!--
--><div>Foo</div><!--
--><div>Bar</div><!--
--><div>And so on...</div><!--
-->

这有效,但我觉得必须有一个更好的解决方案.还有什么方法可以解决断线填充问题？

我有一个"教室"的div,其中包含每个"学生"的div.每个"student"div包含一个图像.这是HTML:

<div class="classroom">
    <div class="student">
        <img class="student-image" src="http://dnqgz544uhbo8.cloudfront.net/_/fp/img/home/f.AmzRdUdc4pEtCuGvU03WXQ.jpg">
    </div>

    <div class="student">
        <img class="student-image" src="http://dnqgz544uhbo8.cloudfront.net/_/fp/img/home/k.jXX55KhHUWZGTAb-GpPkdg.jpg">
    </div>

    <div class="student">
        <img class="student-image" src="http://dnqgz544uhbo8.cloudfront.net/_/fp/img/home/c.ZKQXc2Kc8-po-OK6AhDbtw.jpg">
    </div>
</div>

我想在一行中显示所有"学生"div,所以我使用以下css:

body {
  padding: 0;
  margin: 0;
  overflow: hidden;
}

html, body {
    height: 100%;
}

.classroom {
    position: relative;
    height: 100%;
}

.classroom .student {
    position: relative;
    height: 100%;
    float: left;
}

.classroom .student .student-image {
    height: 100%;
}

为了让学生在"课堂"div中有足够的位置,我使用jQuery来计算"教室"的宽度:

$(document).ready(function() {
    var w = 0;
    $(".student").each(function() {
        w += $(this).width();
    });
    $(".classroom").width(w);
});

不幸的是结果不是我的预期.最后一个"学生"div将下到下一行(好像没有float: left; …