7

当 html 代码没有被“美化”时，它看起来像

<div><img src="img1.jpg"/><img src="img2.jpg"/></div>

然后这些图片呈现为

|=||=| //no gap between

但是经过美化器http://ctrlq.org/beautifier/

<div>
    <img src="img1.jpg"/>
    <img src="img2.jpg"/>
 </div>

它们是这样渲染的

|=| |=| // gap (space) between

因此，相同的代码呈现不同的方式。我想弄清楚如何为 html 内联元素（和 html ）做正确的语法？

（内联甚至可以是“块”元素），所以我不知道如何编写人类可读和正确呈现的代码（至少内联元素之间没有间隙）。

有什么建议么？=)

4

4 回答 4

9

有几个选项可以以易于阅读的方式显示内联块元素，但没有一个是完美的。

选项 1：左浮动

这里有一个关于浮点数的教程：http ://css.maxdesign.com.au/floatutorial/ 强烈建议所有前端开发人员精通这个主题。

选项 2：嵌套评论（已发布）

<div>
    <img src="img1.jpg"/><!-- 
 --><img src="img2.jpg"/>
</div>

选项 3（可能在未来）：（ text-space-collapse: discard;以前white-space-collapse: discard;）

white-space-collapse由于浏览器采用率低，不推荐使用 CSS 属性（请参阅下面的评论）。看来此属性不再是文本装饰规范的一部分。我还找到了参考，以text-space-collapse供将来考虑。

选项4：不要尝试

使用 display:inline-block 时，你不能期望有漂亮的代码。我认为，如果不使用 float:left，您对 inline-block 的使用和对漂亮代码的渴望是相互排斥的。

选项 5：添加font-size: 0到父元素。显然这不适用于 Safari，因此该解决方案与white-space-collapse: discard;.

于 2013-01-31T16:15:20.547 回答
5

根据您的浏览器，它可能会呈现为空间。你可以试试这个：

<div>
    <img src="img1.jpg"/><!-- 
 --><img src="img2.jpg"/>
</div>

<!--是一个评论标签，浏览器会忽略它。

于 2013-01-31T16:09:00.427 回答
1

我知道我会因为这样说而被讨厌。呜呜呜……

如果您想将您的 img 精确地放在彼此旁边并且有“美化”代码，您需要使用一张表格。

Cue screaming

使用 css，您可以在 div 中使用 2 img 做任何您想做的事情，除了将它们精确定位为表格。

这段代码......

<div>
    <table cellspacing="0" cellpadding="0">
        <tr>
            <td>
                <img src="img1.jpg"/>
            </td>
            <td>
                <img src="img2.jpg"/>
            </td>
        </tr>
    </table>
</div>

会得到你想要的结果，但问题是，你能和自己一起生活吗？

相关小提琴 http://jsfiddle.net/t4Krs/

于 2013-01-31T23:26:50.930 回答
0

它不漂亮，但在我看来它比评论技巧更漂亮：

<div>
  <
   img src="img1.jpg"/><
   img src="img2.jpg"
  >
</div>
于 2014-01-14T08:58:59.400 回答