如何通过css样式将一个无序列表ul转换为水平导航栏呢？这是大家在工作中经常遇到的问题，下面我在演示一遍。
工具/原料
浏览器
ul的初始样式
1、先来看一个初始化的ul无序列表得到样式代码如下：<body><ul><li>HTML</li><li>CSS</li><li>JavaScript</li><li>Jquery</li><li>vueJs</li><li>AngularJs</li><li>More...</li></ul></body>其代码和运行效果如下
开始通过css进行控制
1、用css将ul转换为一个水平导航栏步骤：1.将ul中的默认黑点去掉：ul{li衡痕贤伎st-style:none;}2.让ul中的所有l足毂忍珩i设置为行内块元素，让这些li标签都在同一行；3.把ul也变为行内块元素，让logo能和他处在同一行；4.去掉原先黑点所占据的位置，让ul刚刚包裹住所有的li标签；5.将logo图标加在ul标签的上面,此时应该让div的宽高为logo.png的宽高,不然在div的值为空的情况下，div不会显示出来。6.将div设置为行内块元素，让它和ul导航处在同一行。div.logo{display:inline-block;}7.此时虽然他们在同一行上，但是他们并没有对齐，然后有两种方式让他们对其。通过设置float或者vertical-align两种方式。方式一：div.logo,ul{float:left;}//让ul和logo都左浮动方式二：div.logo,ul{vertical-align:middle;}//让ul和logo都进行居中排列8.设置每个li的具体宽高，然后通过text-align与line-height让li中的文字垂直水平居中。9.设置当鼠标经过li时，背景变为蓝色，字体变为白色,同时鼠标变为一个手状。10.去掉ul默认的上下margin值,同时去掉body默认的margin值，让导航贴近窗体的最上面11.根据你的电脑的屏幕分辨率的实际情况给你的div设置一个margin-right属性，让ul导航到右边去。12.让第一个li的默认背景颜色为蓝色，字体为白色加粗。13.给div与ul套上一个header标签，14.给这个header标签设置大于div与ul的高度以避免当字体变大时被撑开然后在给header设置一个2px的padding-bottom，模拟下划线效果15.最后在ul的外面嵌套一个nav，进行更加的语义化说明。
2、1.去掉ul默认的黑点ul{list-style:none;}代码和运行结果如下
3、2.将ul中的所有li设置为行内块元素，让这些li标签都在同一行；li{display:inline-block;}代码和运行结果如下
4、3.把ul也变为行内块元素，让即将添加的logo能和他处在同一行；ul{display:inline-block;}4.去掉原先黑点所占据的位置，让ul刚刚包裹住所有的li标签；ul{padding-left:0;}5.将logo图标加在ul标签的上面,此时应该让div的宽高为logo.png的宽高,不然在div的值为空的情况下，div不会显示出来。html代码：<divclass="logo"></div><ul>......</ul>css代码：div.logo{width:160px;height:51px;background:url(logo.png);}代码和运行结果如下
5、6.将div设置为行内块元素，让它和ul导航处在同一行。div.logo{display:inline-block;}7.设置vertical-align属性或者float属性让ul和div不仅在同一行上，还要让他们进行对齐方式一：div.logo,ul{float:left;}//让ul和logo都左浮动方式二：div.logo,ul{vertical-align:middle;}//让ul和logo都进行居中排列这里使用vertical-align属性。运行结果和代码如下
6、8.设置每个li的具体宽高，然后通过text-align与line-height让li中的文字垂直水平居中。li{width:140px;heigth:51px;text-align:center;line-height:51px;}运行结果和代码如下
7、9.设置当鼠标经过li时，背景变为蓝色，字体变为白色加粗,同时鼠标变为一个手状li:hover{color:white;background-color:#11278a;cursor:pointer;font-weight:bold;}运行结果和代码如下
8、10.去掉ul默认的上下margin值,同时去掉body默认的margin值，让导航贴近窗体的最上面body,ul{margin:0;}运行结果和代码如下
9、11.根据你的电脑的屏幕分辨率的实际情况给你的div设置一个margin-right属性，让ul导航到右边去。margin-right:10%;运行结果和代码如下
10、11饱终柯肢.根据你的电脑的屏幕分辨率的实际情况给你的div设置一个margin-right属性，让ul导航到右边去。div.logo{margin-right:10%;}12.让第一个li鹚兢尖睁的默认背景颜色为蓝色，字体为白色加粗。li:nth-child(1){background-color:#11278a;color:white;font-weight:bold;}13.给div与ul套上一个header标签，<header><divclass="logo"></div><ul><li>HTML</li><li>CSS</li><li>JavaScript</li><li>Jquery</li><li>vueJs</li><li>AngularJs</li><li>More...</li></ul></header>14.给这个header标签设置大于div与ul的高度以避免当字体变大时被撑开然后在给header设置一个2px的padding-bottom，模拟下划线效果header{height:55px;padding-bottom:2px;border-bottom:1pxsolid#e3e3e3;}15.最后在ul的外面嵌套一个nav，进行更加的语义化说明。<body><header><divclass="logo"></div><nav><ul><li>HTML</li><li>CSS</li><li>JavaScript</li><li>Jquery</li><li>vueJs</li><li>AngularJs</li><li>More...</li></ul></nav></header></body>运行结果如下
11、完整代码如下：<!D蚪嬷吃败OCTYPEhtml><html><head><metaname="viewpo鸡堕樱陨rt"content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"><metacharset="UTF-8"><title>标题</title><style>ul{list-style:none;display:inline-block;padding-left:0;}li{display:inline-block;width:140px;heigth:51px;text-align:center;line-height:51px;}div.logo{width:160px;height:51px;background:url(logo.png);display:inline-block;margin-right:10%;}div.logo,ul{vertical-align:middle;}li:hover{color:white;background-color:#11278a;cursor:pointer;font-weight:bold;}body,ul{margin:0;}li:nth-child(1){background-color:#11278a;color:white;font-weight:bold;}header{height:55px;padding-bottom:2px;border-bottom:1pxsolid#e3e3e3;}nav{display:inline-block;}</style></head><body><header><div></div><nav><ul><li>HTML</li><li>CSS</li><li>JavaScript</li><li>Jquery</li><li>vueJs</li><li>AngularJs</li><li>More...</li></ul></nav></header></body></html>
12、用css将ul转换为一个水平导航栏总结1.将ul中的默认黑点去掉：ul{lis隋茚粟胫t-style:none;}2.让ul中的所有li设就女蒿鸳置为行内块元素，让这些li标签都在同一行；3.把ul也变为行内块元素，让logo能和他处在同一行；4.去掉原先黑点所占据的位置，让ul刚刚包裹住所有的li标签；5.将logo图标加在ul标签的上面,此时应该让div的宽高为logo.png的宽高,不然在div的值为空的情况下，div不会显示出来。6.将div设置为行内块元素，让它和ul导航处在同一行。div.logo{display:inline-block;}7.此时虽然他们在同一行上，但是他们并没有对齐，然后有两种方式让他们对其。通过设置float或者vertical-align两种方式。方式一：div.logo,ul{float:left;}//让ul和logo都左浮动方式二：div.logo,ul{vertical-align:middle;}//让ul和logo都进行居中排列8.设置每个li的具体宽高，然后通过text-align与line-height让li中的文字垂直水平居中。9.设置当鼠标经过li时，背景变为蓝色，字体变为白色,同时鼠标变为一个手状。10.去掉ul默认的上下margin值,同时去掉body默认的margin值，让导航贴近窗体的最上面11.根据你的电脑的屏幕分辨率的实际情况给你的div设置一个margin-right属性，让ul导航到右边去。12.让第一个li的默认背景颜色为蓝色，字体为白色加粗。13.给div与ul套上一个header标签，14.给这个header标签设置大于div与ul的高度以避免当字体变大时被撑开然后在给header设置一个2px的padding-bottom，模拟下划线效果15.最后在ul的外面嵌套一个nav，进行更加的语义化说明。