ul{

text-align:center;

}

li{

display:inline

}

这样li元素不需要float且可以居中

比较好样式如下

ul li {
// float: left;
padding: 0 3px;
list-style: none;
cursor: pointer;
color: #cce5ff;
font-size: 16px;
text-align: center;
border-left: 1px solid #cce5ff;
display: inline;
} ul li:first-child {
border: none;
} ul li:hover {
color: #1264A5;
}

ul的li元素水平并居中的css的更多相关文章

  1. 如何使ul中li元素横向排列且不换行

    外层div容器宽度固定,ul宽度随li(li宽度固定)的增加而撑开,但是当ul中li的宽度之和大于div时,ul没有撑开,而是li换行了,如何使li不换行? 解决方法:主要是外面容器设置为white- ...

  2. CSS 各类 块级元素 行级元素 水平 垂直 居中问题

    元素的居中问题是每个初学者碰到的第一个大问题,在此我总结了下各种块级 行级 水平 垂直 的居中方法,并尽量给出代码实例. 首先请先明白块级元素和行级元素的区别 行级元素 一块级元素 1 水平居中: ( ...

  3. ul中li元素横向排列且不换行

    ul { white-space: nowrap; } li { display: inline-block; }     white-space 属性设置如何处理元素内的空白. normal 默认. ...

  4. ul列表li元素横排显示的IE兼容性问题

    目标: 使ul列表横排显示 现象: 谷歌OK,火狐竖排,IE竖排. 原因: ul原css代码: 首先,去除点号,list-style:none;为了使其横排,使用了display:contents;该 ...

  5. html中ul元素水平排列问题

    <!DOCTYPE html> <html> <head> <style> #pic_list { display:block; white-space ...

  6. ul或者ol中添加li元素

    <!doctype html><html>    <head>        <meta charset="utf-8">      ...

  7. 二级ul li元素动态加载click事件

    一.代码 html代码: <ul class="id1" id="id1" style="width:84%; height:75%;overf ...

  8. css3-7 如何让页面元素水平垂直都居中(元素定位要用css定位属性)

    css3-7 如何让页面元素水平垂直都居中(元素定位要用css定位属性) 一.总结 一句话总结:元素定位要用css定位属性,而且一般脱离文档流更加好操作.先设置为绝对定位,上左都50%,然后margi ...

  9. ul列表元素在float:right后li元素倒转

    发现对li元素进行float:right后,虽然成功右浮动,但是的元素是倒转的 解决方案: 对ul进行右浮动,然后对li左浮动 结果

随机推荐

  1. Android中自定义水球

    如图所示: 自定义属性: 在values下创建attrs.xml 文件 <?xml version="1.0" encoding="utf-8"?> ...

  2. Linux基础:sort命令总结

    本文只总结一些常用的用法,更详细的说明见man sort和sort --help. sort命令 sort命令用于串联排序指定文件并将结果写到标准输出. sort可以指定按照何种排序规则进行排序,如按 ...

  3. Web架构之路:MongoDB集群及高可用实践

    MongoDB集群有副本集及主从复制两种模式,不过主从模式在MongoDB 3.6已经彻底废弃,今天主要探讨副本集的搭建和使用,以及分片. 副本集介绍 副本集(Replica Set)即副本的集合,在 ...

  4. spark操作总结

    一.sparkContext与sparkSession区别 任何Spark程序都是SparkContext开始的,SparkContext的初始化需要一个SparkConf对象,SparkConf包含 ...

  5. ztree的添加、修改、删除及前后台交互

    一.引入资源下载并引入ztree的相关js,css和img等.http://www.treejs.cn/v3/api.php ztree的核心代码jquery.ztree.core.jsztree关于 ...

  6. 1.2 管理 NetBackup 许可证

    关于管理 NetBackup 许可证 NetBackup许可证密钥是在安装软件时添加的.对于需要单独购买的选件,可以稍 后在"许可证密钥"对话框中添加许可证. 注意:在进行任何许可 ...

  7. 【转】tf.SessionRunHook使用方法

    原文地址:https://blog.csdn.net/mrr1ght/article/details/81011280 .本文有删减. tf.train.SessionRunHook()是一个类:用来 ...

  8. php代理模式(proxy design)

    结构模式最后一个,接着进入行为模式. <?php /* The proxy design pattern functions as an interface to an original obj ...

  9. 【转载】jmeter-命令行执行脚本

    原文地址:https://blog.csdn.net/qq_35451939/article/details/79643560 日常测试过程中发现,在大数量并发时,jmeterGUI界面时长宕机.卡死 ...

  10. Django 的 cbv

    Django 的 cbv 正如我们了解到的,Django 写视图函数有两种写法:cbv 和 fbv.cbv 提倡使用类来写,fbv 使用函数来 写.当然为了代码的重复行,官方更推荐使用 cbv. 写 ...