HTML项目列表和之前文字如何不加空行 标签段落<p> <div> <br>

目前看来,只有知乎上使用<div></div>把文字和列表装起来,其中不用<p>标签。

没有<div></div>包含,文字不加<p></p>,浏览器最后也会自动加上没有结束标签的<p>,即还是生成个段落,即列表前有了空行。

而在<p></p>中间加<br/>,浏览器会把它变成三个空格。

应该有其它方法实现,以后再说吧:

HTML如何使项目列表与前面的文字之间没有空行?
我发现知乎上的就没有,我看了下代码,原来知乎是用的<div>标签,就不用<p>分段,而是用两个<br>
http://www.zhihu.com/question/20645102

奇怪于知乎的项目列表与上面的段落没有空行,原来知乎不使用<p>,而是<div>,分段是用两个<br>
奇怪于知乎的项目列表与上面的段落没有空行,原来知乎不使用<p>,而是<div>,分段是用两个<br>

小知识

不要忘记结束标签</p>:在未来的 HTML 版本中,不允许省略结束标签。
使用<br/>而非<br>:在 XHTML、XML 以及未来的 HTML 版本中,不允许使用没有结束标签(闭合标签)的 HTML 元素。即使 <br> 在所有浏览器中的显示都没有问题,使用 <br /> 也是更长远的保障
HTML段落 W3School http://www.w3school.com.cn/html/html_paragraphs.asp

span div p 三个标签的区别–Ajax中国
span和div的不同之处在于span是内联的,用在一小块的内联HTML中,前后不断行.
div 元素是块级的(简单地说,它等同于其前后有断行),用于组合一大块的代码。
p(段落)元素是块级的,前后断行,而且还要再隔一行.相当于断两行.
http://www.okajax.com/a/200904/span_div.html
2009-04-20    文章来源:互联网    浏览次数:2552

0.正常:<p></p>后面加项目列表<ul></ul>

短信(SMS,Short Messaging Service)

  • submit 指发送短信
  • deliver 指接受短信

代码

<h3>0.正常:&lt;p&gt;&lt;/p&gt;后面加项目列表&lt;ul&gt;&lt;/ul&gt;</h3>
<p>短信(SMS,Short Messaging Service) </p>
<ul>
  <li>submit 指发送短信 </li>
  <li>deliver 指接受短信 </li>
</ul>

浏览器中的源码

<h3>0.正常:&lt;p&gt;&lt;/p&gt;后面加项目列表&lt;ul&gt;&lt;/ul&gt;</h3>
<p>短信(SMS,Short Messaging Service) </p>
<ul>
<li>submit 指发送短信 </li>
<li>deliver 指接受短信 </li>
</ul>

1.知乎模式:<div></div>中包含项目列表

短信(SMS,Short Messaging Service)
  • submit 指发送短信
  • deliver 指接受短信

代码

<h3>1.知乎模式:&lt;div&gt;&lt;/div&gt;中包含项目列表</h3>
<div>短信(SMS,Short Messaging Service)
  <ul>
    <li>submit 指发送短信 </li>
    <li>deliver 指接受短信 </li>
  </ul>
</div>

浏览器显示源码

<h3>1.知乎模式:&lt;div&gt;&lt;/div&gt;中包含项目列表</h3>
<div>短信(SMS,Short Messaging Service)
<ul>
<li>submit 指发送短信 </li>
<li>deliver 指接受短信 </li>
</ul></div>

2.项目列表前的文字不加<p></p>

短信(SMS,Short Messaging Service)

  • submit 指发送短信
  • deliver 指接受短信

代码

<h3>2.项目列表前的文字不加&lt;p&gt;&lt;/p&gt;</h3>
短信(SMS,Short Messaging Service)
<ul>
  <li>submit 指发送短信 </li>
  <li>deliver 指接受短信 </li>
</ul>

浏览器

<h3>2.项目列表前的文字不加&lt;p&gt;&lt;/p&gt;</h3>
<p> 短信(SMS,Short Messaging Service)
<ul>
<li>submit 指发送短信 </li>
<li>deliver 指接受短信 </li>
</ul>

3.项目列表前的<p></p>中间加<br/>

短信(SMS,Short Messaging Service)

  • submit 指发送短信
  • deliver 指接受短信

代码

<h3>3.项目列表前的&lt;p&gt;&lt;/p&gt;中间加&lt;br/&gt;</h3>
<p>短信(SMS,Short Messaging Service)
  <br /></p>
<ul>
  <li>submit 指发送短信 </li>
  <li>deliver 指接受短信 </li>
</ul>

浏览器

<h3>3.项目列表前的&lt;p&gt;&lt;/p&gt;中间加&lt;br/&gt;</h3>
<p>短信(SMS,Short Messaging Service)    </p>
<ul>
<li>submit 指发送短信 </li>
<li>deliver 指接受短信 </li>
</ul>

[Update]2012-12-09 23:17:29
[Update]2012-12-09 23:48:03

作者: 辛德林记

QQ 105438493

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据