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 回答