ul li 水平居中
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 水平居中的更多相关文章
- ul+li水平居中的几种方法
一.posotion:relative; 代码: <!DOCTYPE html> <html> <head> <meta charset="UTF- ...
- 让ul li水平居中(任意删除li也能水平居中)
HTML代码: <div class="box"> <ul class="button-ct"> <li></li&g ...
- ul li内的文字水平居中显示
head><style rel="stylesheet" type="text/css" >#top{height:140px;}#top u ...
- Ul li 横排 菜单
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- Ul li 竖排 菜单
Ul li 竖排 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://ww ...
- ul li设置横排,并除去li前的圆点
效果预览:http://hovertree.com/texiao/css/ 如何用CSS制作横向菜单 让ul li横向排列及圆点处理 我们先建立一个无序列表,来建立菜单的结构.代码是: <ul& ...
- 使用CSS把ul,li制作成表格
查看效果:http://hovertree.com/texiao/css/7.htm 具体实现请看样式部分. 完整代码: <!DOCTYPE html> <html> < ...
- html ul li的学习
DIV+CSS里,我们用得最多的就是ul li来显示数据,如新闻按钮等. <div id="menu"> <ul> <li><a href ...
- ul li 下的元素内容垂直居中
CSS: <style> * {;; } li { list-style: none; } li span { border: 1px solid red; height: 100px; ...
随机推荐
- 一年java程序员的感悟
前沿 在小公司干了差不多一年,刚进来与一个中级程序员做交接,过了大概一个月,那个中级程序员走了,从此,走上了"泥泞"的道路(独立开发),熟悉了公司的项目和业务用了一个月左右,公司当 ...
- 关于div可编辑的复制粘贴问题
todoFilter(e) { e.preventDefault(); if (!e.target.getAttribute('contenteditable')) { return; } const ...
- [HAOI2007]反素数ant
1053: [HAOI2007]反素数ant Time Limit: 10 Sec Memory Limit: 162 MBSubmit: 1907 Solved: 1069[Submit][St ...
- ubuntu循环登录问题的解决
之前试过几个方法都不行,包括改/etc/profile,startx,删Xauthority文件等,这些都是因为,形象地来说是药不对症,ubuntu循环登录是有很多个问题造成的,前面的这些例子只是针对 ...
- java获取当前文件路径 [转]
1.如何获得当前文件路径 常用: 字符串类型:System.getProperty("user.dir"); 综合: package com.zcjl.test.base; imp ...
- mysql查询结果乱码
1.查询数据库结果乱码 mysql,; +-----------+-------------------------------------------------------------+ | do ...
- python基础7 - 函数
1. 函数的快速体验 所谓函数,就是把 具有独立功能的代码块 组织为一个小模块,在需要的时候 调用 函数的使用包含两个步骤: 定义函数 —— 封装 独立的功能 调用函数 —— 享受 封装 的成果 函数 ...
- h5 audio播放音频文件
h5 audio播放音频文件 注:下面html中样式及不相关的内容去掉了 第一个例子 播放没有防盗链的外网音频文件是可以的 <!doctype html> <html> < ...
- shell read
#!/bin/bash read -p "Enter your account:" acct #提示用户输入用户名read -s -p "Enter your passw ...
- URL的编码
+ URL 中+号表示空格 %2B 空格 URL中的空格可以用+号或者编码 %20 / 分隔目录和子目录 %2F ? 分隔实际的 URL 和参数 %3F % 指定特殊字符 %25 # 表示书签 %23 ...