Question

在html中编写干净且易读的代码时，如何处理换行符和空格

例如，如果我在下一行使用break，则

之间会有一个额外的空格

<style type="text/css">
    a {margin:0px; border:1px solid #666; padding:10px; text-decoration:none;}
</style>
<div>
    <a href="#">Test 1</a><a href="#">Test 2</a> <!-- SAME LINE -->
    <a href="#">Test 3</a> <!-- NEW LINE -->
    <a href="#">Test 4</a>
</div>

jsFiddle

所以我应该怎么做，

是否有一种标准的方法来处理这个问题，或者我应该在1行中编写所有html代码，如果我不想要空格并且标记之间的中断就像这样做

编辑：

谢谢大家，但我已经知道额外的空间缩小为一个以及如何（输入）行为，问题是我不希望输入这样做（在我的标签之间放置一个空格因为那时我必须得到那个空间在我的风格），所以我不必在同一行编写我的代码（我想把它写得干净可读）

编辑2：

我想我必须多清楚一下这个问题

我需要这段代码：

<div>
    <a href="#">Test 1</a>
    <a href="#">Test 2</a>
    <a href="#">Test 3</a>
</div>

显示（由用户看到）并且像这段代码一样:(由于换行符或空格，中间没有额外的空格）

<div>
    <a href="#">Test 1</a><a href="#">Test 2</a><a href="#">Test 3</a>
</div>

这个额外的空间让我很麻烦，

有解决方案吗？也许造型身体不计算空间并输入“标签之间（当然不在文本内部标签之间）”作为结果中的空格？

解决方案

通过阅读ChiefGui关于最后一部分的回答，他提到浮动，所以只需添加float：left;到我的代码上面我的问题解决了

在线：jsFiddle

代码：

<style type="text/css">
    a {float:left; margin:0px; border:1px solid #666; padding:10px; text-decoration:none;}
</style>
<div>
    <a href="#">Test 1</a><a href="#">Test 2</a> <!-- SAME LINE -->
    <a href="#">Test 3</a> <!-- NEW LINE -->
    <a href="#">Test 4</a>
</div>

更新（另一个解决方案）：

我尝试了另一种方法，我认为 显示：table-cell; 也是一个答案，也许它更好，因为我们不需要在那之后清除< / p>

唯一的缺点是它不适用于IE 7及更早版本，虽然我认为它可以通过简单的 lt IE 8 hack进行管理

jsFiddle

Answer 1

使用纯HTML打破一行的最语义方法是使用<br/>标记。

请参阅：

<style type="text/css">
    a {margin:0px; border:1px solid #666; padding:10px; text-decoration:none;}
</style>
<div>
    <a href="#">Test 1</a><a href="#">Test 2</a><br />
    <a href="#">Test 3</a><br />
    <a href="#">Test 4</a>
</div>

<br/>存在很多偏见，但在这种情况下，您可以毫无问题地使用。

更新

当你有一个像你向我们展示的项目列表时，首先，正确的做法是将所有链接放在这样的列表中：

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

其次，要将它们对齐在同一行，请使用display: inline;属性。参见：

ul li {
   display: inline-block;
}

或者，如果您愿意，可以根据您的代码浮动元素。看：

ul li {
   float: left;
}

Answer 2

通过浏览器将多个空格（空格，输入，制表符等）缩小到单个空格。唯一的例外是：

标记“pre”：

<pre>
    Your    text   with    original   spacing
</pre>

&...之类的事情：

A&nbsp;&nbsp;B(this will have two spaces between A & B)

所以在你的情况下：link1(no space)link2(enter)link3(enter)link4基本上是link1link2 link3 link4

如果您想强制换行，请使用<br>代码。

Answer 3

在多行上编写代码没有问题。如果你将块元素设置为：

，请注意

div {
    display:inline-block;
}

因为然后在浏览器中显示元素之间的空格。

Answer 4

将多个空格字符压缩为一个（如果没有另外指定）。

所以你唯一的选择是在一行上写下所有链接。

Answer 5

使用ul li是创建像

这样的标签的好方法

<强> HTML

<div>
    <ul>
        <li><a href="#">Test 1</a></li>
        <li><a href="#">Test 2</a></li>
        <li><a href="#">Test 3</a></li>
        <li><a href="#">Test 4</a></li>
    </ul>
</div>

<强> CSS

a {
    margin: 0px; 
    border: 1px solid #666; 
    padding: 10px; 
    text-decoration: none;
    background: #efefef;
    font-size: 12px;
    font-family: Arial, sans-serif;
    color: #000;
}
ul li{
 display:inline;
}

管理空间边距是更好的方式

Answer 6

您还可以使用html评论：

<div><!--
    --><a href="#">Test 1</a><!--
    --><a href="#">Test 2</a><!--
    --><a href="#">Test 3</a><!--
--></div>

它对人类可读，并且所有空格都被注释掉用于HTML解析器。

如何在html源代码中处理空格和制表符（以及换行符）

编辑：

编辑2：

解决方案

更新（另一个解决方案）：

6 个答案:

更新