Question

以下是我页面的代码段：

<input value="Search" type="submit" /><!-- whitespace
--><span class="vdivider"></span><!-- whitespace
--></form><!-- whitespace
--><form action="login_action.php" method="post"><!-- whitespace
--><?php

那些空白评论是为了摆脱分隔符两侧的空白。这真的是这样做的唯一方法吗？必须有一个更优雅的解决方案。

Answer 1

要考虑的一个选项 - 如果可以的话，使用模板引擎。例如，在Smarty中，有一个{strip}函数就是这样做的：

{* the following will be all run into one line upon output *}
{strip}
<table border='0'>
 <tr>
  <td>
   <a href="{$url}">
    <font color="red">This is a test</font>
   </a>
  </td>
 </tr>
</table>
{/strip}

输出：

<table border='0'><tr><td><a href="http://. snipped...</a></td></tr></table>

Answer 2

您可以使用font-size:0黑客。基本上，您在父元素上设置font-size:0，并在子元素上显式设置字体大小。

现场演示： http://jsfiddle.net/simevidas/mLZYW/1/

（没有黑客的演示：http://jsfiddle.net/simevidas/mLZYW/）

Answer 3

白色空间仅显示内联元素的周围或旁边，因此至少对于您不需要它的表单（如果您尚未将表单设置为display:inline ...）。

定位或浮动内容几乎总是会删除不需要的空格，因此，例如，如果.vdivider应该是垂直分隔符/新行，则可以在{{display:block上使用input 1}}在它之前删除该元素及其周围的注释。

Answer 4

元素之间的空格（包括换行符和制表符）会导致浏览器在应该没有的位置插入空格。

我见过的最优雅的解决方法是将>放在下一行，而不是放在同一行。这样，它仍然是合法的HTML，你仍然可以保持它漂亮。

例如：

<input value="Search" type="submit" />
    <span class="vdivider"></span>
    </form><form action="login_action.php" method="post">
    <?php>

会变成：

<input value="Search" type="submit" 
    /><span class="vdivider"></span
    ></form><form action="login_action.php" method="post"
    ><?php>

如何在没有过多评论的情况下摆脱空白？

4 个答案: