6

在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，所以只需添加 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>

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

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

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

jsFiddle

4

6 回答 6

5

用纯 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;
}
于 2013-07-04T13:58:32.600 回答
1

在多行上编写代码没有问题。如果您将块元素设置为以下内容，请注意：

div {
    display:inline-block;
}

因为这样元素之间的空格就会显示在浏览器中。

于 2013-07-04T13:58:33.727 回答
1

多个空格（空格、回车、制表符等）被浏览器缩小为一个空格。唯一的例外是：

标签“前”：

<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>标签。

于 2013-07-04T13:56:58.380 回答
0

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

因此，您唯一的选择是将所有链接写在一行上。

于 2013-07-04T13:58:26.220 回答
0

使用 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;
}

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

于 2013-07-04T14:00:47.683 回答
0

您还可以使用 html 注释：

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

它对人类来说是可读的，并且所有空格都被 html 解析器注释掉。

于 2013-07-10T14:28:13.187 回答