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

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

所以我该怎么做,

是否有一种标准的方法来处理这个或我只是应该写一行中的所有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; 也是一个答案,也许它更好,因为我们不需要在那之后清除

唯一的缺点是它不适用于IE 7及更早版本,虽然我认为它可以通过一个简单的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;
}