li的float:left方法显然有一个问题,就是无法居中(水平),只能使用padding-left或margin-right的方法方法来固定其居中。但这样可能在宽屏与窄屏的显示不一致。使用这种方法主要是利用li的浮动固定宽度来实现,li的默认display为block,将其这个属性改为inline便可实现这种ul li居中的问题。

让LI水平居中代码共享CSS如下:
#linknav{height:140px;}
#linknav ul{text-align:center;list-style-type:none;}
#linknav ul li{display:inline;list-style-type:none;}
DIV结构代码如下:
<div id="linknav">
<ul>
<li><a href="#">关于我们</a></li>
<li><a href="#">域名注册</a></li>
<li><a href="#">虚拟主机</a></li>
<li><a href="#">企业邮局</a></li>
<li><a href="#">网站优化</a></li>
<li><a href="#">网站推广</a></li>
</ul>
</div>

ul li 水平居中的更多相关文章

  1. ul+li水平居中的几种方法

    一.posotion:relative; 代码: <!DOCTYPE html> <html> <head> <meta charset="UTF- ...

  2. 让ul li水平居中(任意删除li也能水平居中)

    HTML代码: <div class="box"> <ul class="button-ct"> <li></li&g ...

  3. ul li内的文字水平居中显示

    head><style rel="stylesheet" type="text/css" >#top{height:140px;}#top u ...

  4. Ul li 横排 菜单

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. Ul li 竖排 菜单

    Ul li 竖排 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://ww ...

  6. ul li设置横排,并除去li前的圆点

    效果预览:http://hovertree.com/texiao/css/ 如何用CSS制作横向菜单 让ul li横向排列及圆点处理 我们先建立一个无序列表,来建立菜单的结构.代码是: <ul& ...

  7. 使用CSS把ul,li制作成表格

    查看效果:http://hovertree.com/texiao/css/7.htm 具体实现请看样式部分. 完整代码: <!DOCTYPE html> <html> < ...

  8. html ul li的学习

    DIV+CSS里,我们用得最多的就是ul li来显示数据,如新闻按钮等. <div id="menu"> <ul> <li><a href ...

  9. ul li 下的元素内容垂直居中

    CSS: <style> * {;; } li { list-style: none; } li span { border: 1px solid red; height: 100px; ...

随机推荐

  1. JDK1.8之Stream

    为什么需要 Stream Stream 作为 Java 8 的一大亮点,它与 java.io 包里的 InputStream 和 OutputStream 是完全不同的概念.它也不同于 StAX 对 ...

  2. JMeter并发性测试

    JMeter并发性测试 一.JMeter简介 JMeter是apache公司基于java开发的一款开源压力测试工具,体积小,功能全,使用方便,是一个比较轻量级的测试工具,使用起来非常简单.因为jmet ...

  3. Apache 静态缓存配置

    静态文件缓存 静态缓存在客户端下进行缓存,可以设置缓存文件类型与缓存时间,提升客户端访问站点速度. 语法格式 ExpiresByType type/encoding “<base> [pl ...

  4. Ubuntu gcc错误:对'log'等函数未定义的引用

    Ubuntu gcc错误:对'log'等函数未定义的引用 a.c #include <stdio.h>#include <math.h>int main(){    float ...

  5. 查看linuxCPU信息

    linux 下查看机器是cpu是几核的 几个cpu more /proc/cpuinfo |grep "physical id"|uniq|wc -l 每个cpu是几核(假设cpu ...

  6. 自己写的JS排序算法

    这学期刚刚学完数据结构,之前就自己写了一点东西,现在整理一下. <!DOCTYPE html> <html> <head> <meta charset=&qu ...

  7. GroupAnagrams,变形词问题

    问题描述:给定一个字符串数组,返回变形词组,变形词是指字母一样但顺序不一样的词. Given an array of strings, group anagrams together. For exa ...

  8. TF卡.之前的(20180923)

    1.京东上搜到的(购买记录) ZC:64G的应该是 只买了一个 另一个取消了 2.TB上搜到的 购买记录是这样的(注意 也有 取消的) 3. 4. 5.

  9. LinkedBlockingQueue 与ConcurrentLinkedQueue队列的不同与同

    LinkedBlockingQueue 的API中,从队列中获取元素,有以下几个方法: 1.take():原文:Retrieves and removes the head of this queue ...

  10. IOS-导航路线

    1.可以将需要导航的位置丢给系统自带的APP进行导航 2.发送网络请求到公司服务器获取导航数据, 然后自己手动绘制导航 3.利用三方SDK实现导航(百度) >当点击开始导航时获取用户输入的起点和 ...