html5图片的纵向排列,html 中的 标签横向排列的方法

html页面中的多个连续的

标签在默认的情况下是竖向排列的，不过我们可以设置 li 标签的 CSS 样式，来使一个 ul 标签中的所有 li 标签都横向排列。

多个 html 中 li 标签默认竖向排列

html代码html>

#pic_list li{

width:40px;

height:40px;

margin:3px;

background:red;

list-style: none;

}

运行结果：

通过下面，可以发现，在默认情况下，

• 中所有的
• 标签都是竖向排列的

  

  li标签默认竖向排列

  使用 css float 属性，使 li 标签横向排列

  css代码改动下#pic_list li{

  width:40px;

  height:40px;

  margin:3px;

  background:red;

  list-style: none;

  /*加个一个 float 属性*/

  float: left;

  }

  运行结果：

  

  li标签水平横向排列

  PS：由于 li 是块元素，可以使用 float: left; 让所有的 li 标签向左浮动，达到水平横向排行的效果

  使用 css display 属性，使 li 标签水平排列

  CSS代码修改如下：#pic_list li{

  width:40px;

  height:40px;

  margin:3px;

  background:red;

  list-style: none;

  /*加个一个 display 属性*/

  display: inline-block;

  }

  PS： "display: inline-block"，可以将 li 标签转换成行内块标签，以达到横向水平排列的效果。