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. ThinkPHP5 Nginx通用配置

    项目配置内容如下: server { #配置监听端口 listen 80; listen [::]:80; #设置网站根目录作为变量root set $root /var/www/web; #设置网站 ...

  2. Linux基础:时间同步工具Chrony

    在Linux下,默认情况下,系统时间和硬件时间,并不会自动同步.在Linux运行过程中,系统时间和硬件时间以异步的方式运行,互不干扰.硬件时间的运行,是靠Bios电池来维持,而系统时间,是用CPU t ...

  3. java(包括springboot)读取resources下文件方式

    1.使用项目内路径读取,该路径只在开发工具中显示,类似:src/main/resources/resource.properties.只能在开发工具中使用,部署之后无法读取.(不通用) File fi ...

  4. Redis系列-第六篇哨兵模式

    https://blog.csdn.net/niugang0920/article/details/97141175 Redis的主从复制模式下, 一旦主节点由于故障不能提供服务, 需要人工将从节点晋 ...

  5. python的with语法的深入理解

    如果你有一些对象(比如一个文件.网络连接或锁),需要支持 with 语句,下面介绍两种定义方法. 方法(1): 首先介绍下with 工作原理 (1)紧跟with后面的语句被求值后,返回对象的“__en ...

  6. Linux下关于Qt无法调用fcitx的中文输入

    1 本机环境: deepin 15.11 Qt 5.11.3 fcitx 输入法 2 问题描述 Qt Creator 和使用 QT 编译的程序运行时均不能使用deepin系统自带的fcitx输入法,且 ...

  7. GC线程是不是守护线程

    是 线程的话分为守护线程和非守护线程(即用户线程) 只要当前JVM实例中尚存在任何一个非守护线程没有结束,守护线程就全部工作; 只有当最后一个非守护线程结束时,守护线程随着JVM一同结束工作,守护线程 ...

  8. Java16周作业

    题目1:编写一个应用程序,利用Java多线程机制,实现时间的同步输出显示. /*使用Runnable接口使用类创建线程对象,重写run()方法**/ 代码 public class timetext ...

  9. 获取浏览器名称与版本checkbrowse()

    function checkbrowse() { var ua = navigator.userAgent.toLowerCase(); var is = (ua.match(/\b(chrome|o ...

  10. 从Swift桥接文件到Clang-LLVM

    http://blog.csdn.net/u014795020/article/details/72514109 前言 今天在Swift工程中不小心创建了一个OC文件,于是乎提示我创建一个桥接文件,那 ...