相关疑难解决方法(0)

当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)做正确的语法？

(内联可能是'块'元素),所以我不知道,如何编写人类可读和正确呈现的代码(至少内联元素之间没有间隙).

有什么建议？=)

我正在开发一个项目,该项目使用同一个类的几个div,每个div包含一个子元素,可能是一个未指定高度的图像或iframe.我希望容器div正好是其子元素的高度,但默认高度比子高3px.

我有一个JSfiddle在http://jsfiddle.net/52me041n/2/上演示了这个问题.

HTML:

<div class="outside">
    <img class="inside" id="pic" src="https://images.duckduckgo.com/iu/?u=http%3A%2F%2Fblogs.cisco.com%2Fwp-content%2Fuploads%2Fclouds.png&f=1" height="200px"/>
</div>
<br/>
<div class="outside">
    <iframe class="inside" width="420" height="315" src="//www.youtube.com/embed/VwTnyRHEZSQ" frameborder="0" allowfullscreen></iframe>
</div>

CSS:

.outside{
background-color: red;
}

我想知道是否可以用CSS将div设置到合适的高度,如果没有,如何用JS来改正它.

HTML

<ul>
  <li><a href="#">Item #1</a></li>
  <li><a href="#">Item #2</a></li>
  <li><a href="#">Item #3</a></li>
  <li><a href="#">Item #4</a></li>
  <li><a href="#">Item #5</a></li>
</ul>

CSS

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
li {
  display: inline-block;
  width: 20%;
}

我的问题

当我使用display: inline-block;我的<li>元素时,它们表现得比我使用时更宽float: left;.我将它们的宽度设置为20%(100%/ 5),但是最后一个<li>被强制到下一行,好像它太宽...当我使用float: left;而不是时display: inline-block;,五个<li>元素符合预期(具有相同的宽度) ...

jsFiddle: Inline-Block vs. Float

我想使用内联块,因为我不需要使用clearfix来使父<ul>扩展到<li>元素的高度...我可能决定使用float如果我能找到正确的方法来使用clearfix在这种情况下...无论如何,我仍然想知道为什么内联块宽度太宽......这些<li>元素应该在一条线上适合五个宽,只要宽度为20%并且内部的内容不是太宽了......

我能找到的唯一一个类似于我的问题是这个(这对我没用):css inline-block vs float

考虑以下代码：

<div id="sidebar">
<?php
  require_once('/components/search.php');
  require_once('/components/categories.php');
?>
</div>

search.php本质category.php上是相同的结构 - 具有一些特定内容的 div 容器。这里没什么特别的，纯 HTML：

<div class="component">
<!-- blah -->
</div>

然而，当用require_once(或require/include等) 插入时，PHP 在每个元素上方添加空格，将其向下推，可在 Chrome 的 Inspect Element 工具中识别为空文本节点（删除此节点时空格消失）

从侧边栏脚本中删除所有不必要的空格（使其成为单行代码）并不能解决问题。如果我只是用require_once组件的内容替换这些行，则不会出现空格。所以不确定为什么 PHP 在 require 上添加它。有任何想法吗？

更新

事实证明，这个仍然是一个奇怪的。我现在同意这require_once似乎不是根本原因。我决定暂时忽略这个问题，并希望在我进一步解决它之后它会消失。唉，它仍然存在，所以我做了更多调查。检查浏览器中的页面源代码，确认有问题的代码确实作为一个长的不间断行返回http://pastebin.com/dtp7QNbs - 任何标签之间没有空格或回车符，但浏览器中出现空格- 在检查元素工具中可识别为每个元素之间的空行<div class="component">

这是否有助于进一步阐明这个问题？