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. memcpy函数的实现

    1.按1个字节拷贝 (1)不要直接使用形参,要转换成char* (2)目标地址要实现保存 (3)要考虑源和目标内存重叠的情况 void * mymemcpy(void *dest, const voi ...

  2. windows自动化-脚本案例

    ; Script Start - Add your code below here Run("D:\Navicat Premium\navicat.exe") Sleep(1000 ...

  3. iview 多选下拉列表选项回显问题

    如,简单的多选Select, <Select v-model="model" filterable clearable transfer multiple > < ...

  4. [ ERROR ] Error in test library 'pymysql': Creating keyword 'Connect' failed: Keyword with same name defined multiple times.

    [ ERROR ] Error in test library 'pymysql': Creating keyword 'Connect' failed: Keyword with same name ...

  5. pyechart基本使用大全

    charts_base 原文链接:https://blog.csdn.net/weixin_43735353/article/details/89328048 图表详细配置请参考 图表配置篇 基本图表 ...

  6. linux设备驱动程序-i2c(0)-i2c设备驱动源码实现

    (基于4.14内核版本) 为了梳理清楚linux内核中的i2c实现框架,从本文开始,博主将分几个章节分别解析i2c总线在linux内核中的形成过程.匹配过程.以及设备驱动程序源码实现. 在介绍linu ...

  7. c语言实现基本的数据结构(五) 单链队列

    #include <stdio.h> #include <tchar.h> #include <stdlib.h> #define MaxQueueSize 100 ...

  8. PAT 乙级 1023.组个最小数 C++/Java

    题目来源 给定数字 0-9 各若干个.你可以以任意顺序排列这些数字,但必须全部使用.目标是使得最后得到的数尽可能小(注意 0 不能做首位).例如:给定两个 0,两个 1,三个 5,一个 8,我们得到的 ...

  9. geany写C语言,printf打印中文时显示乱码

    原因 geany设置了编码格式为utf8 运行时显示出的cmd窗口编码格式为GBK 解决方法 要么修改geany编码,要么修改cmd窗口编码. 修改geany编辑器为GBK编码格式 编辑=>首选 ...

  10. 【P1889】SOLDIERS (中位数)

    题目描述 在一个划分成网格的操场上, n个士兵散乱地站在网格点上.由整数 坐标 (x,y) 表示.士兵们可以沿网格边上.下左右移动一步,但在同时刻任一网格点上只能有名士兵.按照军官的命令,们要整齐地列 ...