html <li>如何横向排列

2023-04-14 16:01:02html-css011

html <li>如何横向排列,第1张

很多回答都是设置float属性来排列，其实可以从属性之外的方面设置。鉴于li元素是块状元素，所以元素与元素之间才会换行，现在只要把li元素变成元素之间可以同行的内联块状元素就行了。具体代码如下：

li{

display：inline-block；

}

第一步、编写横向菜单的HTML代码架构请将以下代码添加到HTML文档的导航栏区域中。Baidu.ComCode52.NetYahoo.Com标签范围中。#menu{font:12pxverdana,arial,sans-serif/*设置文字大小和字体样式*/}#menu,#menuli{list-style:none/*将默认的列表符号去掉*/padding:0/*将默认的内边距去掉*/margin:0/*将默认的外边距去掉*/}中的各条目默认都是纵向排列的，需要定义CSS来让其横向排列起来。Tips：因为现在将导航栏拉出来独立讲解，所以需要设置一些公共样式，如果在body或其他地方已经重设了默认效果，以上代码可以去掉2、让文字横排标签下的项目默认是纵向排列的，需要定义额外的CSS属性让其横向排列。#menuli{float:left/*往左浮动*/}3、设置链接样式：#menulia{display:block/*将链接设为块级元素*/padding:8px50px/*设置内边距*/background:#3A4953/*设置背景色*/color:#fff/*设置文字颜色*/text-decoration:none/*去掉下划线*/border-right:1pxsolid#000/*在左侧加上分隔线*/}用内边距（即填充padding）的方式，让每个菜单变得宽一些，如果菜单是中英文混排的，建议设置单个菜单的高宽，这样可以避免中英文字符行高不一致导致的高度误差。设置固定高度的方式：#menulia{display:block/*将链接设为块级元素*/width:150px/*设置宽度*/height:30px/*设置高度*/line-height:30px/*设置行高，将行高和高度设置同一个值，可以让单行文本垂直居中*/text-align:center/*居中对齐文字*/background:#3A4953/*设置背景色*/color:#fff/*设置文字颜色*/text-decoration:none/*去掉下划线*/border-right:1pxsolid#000/*在左侧加上分隔线*/}4、链接悬停效果：通过以上几步的综合作用，一个横向导航栏的初步框架就出现了。此步主要是定义链接的悬停效果，让导航栏更美观。当然，如果要让导航栏更炫丽，可以在CSS悬停属性上定义背景图片。#menulia:hover{background:#146C9C/*变换背景色*/color:#fff/*变换文字颜色*/}这里的代码一个缺陷，最右边会多出来一个边框，由于:first-child伪类不被IE系列浏览器所支持，我们只能单独写一个样式，将最后一个边框去掉，同时要给HTML代码增加一个额外选择符。Baidu.ComCode52.NetYahoo.com#menulia.last{border-right:0/*去掉左侧边框*/}好了，到这里一个简单的横向导航菜单就制作完成了

CSS在英文中有如下几种常见的缩写：

1，Cascading Style Sheets 层叠样式表

2，Content Scrambling System DVD电影的加密系统

3，Cast Semi-Steel 半铸钢, 钢性铸铁

4，College Scholarship Service 大学奖学金处

其中在网络上最常见的是Cascading Style Sheets（层叠样式表）

什么是Cascading Style Sheets（层叠样式表）

* CSS是Cascading Style Sheets(层叠样式表)的简称.

* CSS语言是一种标记语言,它不需要编译,可以直接由浏览器执行(属于浏览器解释型语言).

* 在标准网页设计中CSS负责网页内容(XHTML)的表现.

* CSS文件也可以说是一个文本文件,它包含了一些CSS标记,CSS文件必须使用css为文件名后缀.

* 可以通过简单的更改CSS文件,改变网页的整体表现形式,可以减少我们的工作量,所以她是每一个网页设计人员的必修课.