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. 面试题:什么叫2B树

    在B树的基础上,每个节点有两个域,且他们是有顺序的,在层次上的又满足二叉排序树的性质

  2. Android中控件AutoCompleteTextView的使用方法和一些属性

    <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android=&quo ...

  3. iOS RACSubject代替通知

    RAC是一个很常用并且很好用的插件,简洁的调用方式可以代替很多原生方法,下面是RACSubject代替通知的使用方式: #import <UIKit/UIKit.h> #import &l ...

  4. Spring boot应用如何支持https

    首先使用命令行生成一个keystore文件: keytool -genkey -alias tomcat -keyalg RSA -keystore ./jerry.keystore 保存到本地项目文 ...

  5. PHP公众号开发给用户发微信消息提醒功能

    最近做的一个项目,当有用户有资金到账或者成员变动时需要给他发一条微信消息提示.针对这个,开始想使用模板消息,但是刚注册的公众号申请消息模板需要几天时间申请,在时间不足下选择了使用客服消息接口,微信文档 ...

  6. CDA数据分析【第二章:数据收集与导入】

    一.概述 数据是对我们所研究现象的属性和特征的具体描述,在分析数据前必须要做的工作就是收集数据.按照存储形式可以将数据划分为结构化数据.非结构化数据和半结构化数据. 1.结构化数据 能够用数据或统一的 ...

  7. html, js,css应用文件路径规则

    web前端一般常用文件 .html .css .js.但是当用css文件和html引入资源(比如图片)时,路径可能不相同.下面总结了几条. 使用相对路径引入规则: html或者js引入图片,按照htm ...

  8. angular8 打包时 文件过大 导致内存溢出解决方案(记录)

    在package.json 中添加 "scripts": { "ng": "ng", "start": "ng ...

  9. springboot之DevTools热部署的简单原理解析

    IDEA新建springboot选择DevTools springboot-devtools模块能够实现热部署,添加类.添加方法,修改配置文件,修改页面等,都能实现热部署. 原理就是重启项目,但比手动 ...

  10. 12、Python函数高级(命名空间、作用域、装饰器)

    一.名称空间和作用域 1.命名空间(Namespace) 命名空间是从名称到对象的映射,大部分的命名空间都是通过 Python 字典来实现的. 命名空间提供了在项目中避免名字冲突的一种方法.各个命名空 ...