近期帮朋友做一个他们公司的商品站点，用到了曾经学到的html+css技术，当然做站点少不了Javascript和jquery这些.....

这个功能主要实现了导航条里面的条目是居中的。所以声明了ul,li的样式，始终找不到错误，怎么也不能让当中的元素居中，以下就是这段代码：

<html>

	<head>

		<style type="text/css">

			body{

				margin: 0;

				padding: 0;

			}

			.nav{

				width: 100%;

				height: 300px;

				text-align: center;

			}

			/* 去除掉ul本身有的样式。也以前在这里面加text-align:cneter; */

			.nav ul{margin:0px auto; padding:0px;}

			.nav ul li{list-style: none; float: left; margin: 0 20px 0 0; display: inline;}

		</style>

	</head>

	<body>

		<div class="nav">

			<ul>

				<li>etmatch</li>

				<li>iphone</li>

				<li>ipad</li>

				<li>data</li>

				<li>line</li>

			</ul>

		</div>

	</body>

</html>

我们看到本来设想的是.nav中的样式中设置了居中体现（text-align:center），可是我们这里多了一个条件就是float：left ，这个我们最初想的应该是让li在同一行。事实上假设去掉display:inline后的效果和上段代码是一样的，可是我们的解决方式不是去掉display:inline，而是去掉float:left。  这也就是浮动给ul。li带来的一些不可规避的效果，所以我们不要滥用浮动，要懂得浮动的详细原理再下手。

做这个站点的一个体会就是要在短期的时间里做成一个效果。像我这个仅仅学过div和css的，很多其它的我是用别人写好的JS包，没有自己去封装一些JS功能。所以假设说想更深入的学习网页制作或者企业级站点开发，还须要看一些书籍丰富自己的学识。

转载请注明作者和出处 Coder的不平庸：http://blog.csdn.net/pearyangyang/article/details/41920503    谢谢！

ul,li不能左右居中的问题的更多相关文章

  1. 几个简单的css设置问题：div居中，ul li不换行 ，内容超出自动变省略号等

    1  div在页面居中的问题 1)position值为relative时(相对定位),css设置属性margin:0 auto;(0 auto,表示上下边界为0,左右则根据宽度自适应相同值,即居中)即 ...

  2. CSS中ul li居中的问题

    一直以为对ul li居中对齐已经掌握了.但最近做项目时发现之前li的float:left方法显然有一个问题,就是无法居中(水平),只能使用padding-left或margin-right的方法方法来 ...

  3. [笔记]ul>li>a做分布时, 让其居中显示效果

    结构: <div id="page"> <ul> <li><a href="#">首页</a>< ...

  4. Ul li 竖排 菜单

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

  5. div+css（ul li）实现图片上文字下列表布局

    css样式表代码: html布局代码: 效果图: html布局部分,可根据自己需要添加对应的div即可. 1.CSS关键样式单词解释 1).ul.imglist{ margin:0 auto; wid ...

  6. [置顶] html学习笔记，锚点，超链接，table布局，表头，h,sub,blockquote,ul,li,ol.dl,加入收藏，打印，弹出窗口

    <a name="shouye"></a> <strong>strong加粗</strong> <br> 没有加粗 &l ...

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

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

  8. [转载] ul li css 做横向菜单

    原文地址: http://www.cnblogs.com/amylis_chen/archive/2011/09/24/2188398.html 第一步:建立一个无序列表 我们先建立一个无序列表,来建 ...

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

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

随机推荐

  1. B1003 物流运输（最短路 + dp）

    这个dp其实不是那么难,状态其实很好想,但是细节有少许偏差. 当时我并没有想到最短路要在dp之外写,后来看题解之后发现要预处理出来每段时间1~M的最短路,然后直接dp. 题目: Description ...

  2. 5-8 第五天 微信 JS-SDK

    SDK的难点不多,但是容易出错的地方特别多.几乎任何一个环节都会犯错误. 难道没有域名就不让你测了吗?别担心,有公众测试号, 域名这个代理呢是通过QQ浏览器的服务器调试,来绑定这个端口的,把这个服务开 ...

  3. [Apple开发者帐户帮助]二、管理你的团队（2）更改团队成员角色

    如果您已加入Apple开发者计划,您将在App Store Connect中管理团队成员.有关详细信息,请转到App Store Connect帮助中的添加和编辑用户. 如果您已加入Apple Dev ...

  4. Cent OS 6/7 中通过yum安装软件时提示cannot find a valid baseurl...的解决方法

    目录 1 问题描述 2 解决方法一 (Cent OS 7中有效) 3 解决方法二 (Cent OS 7中无效) 1 问题描述 新申请了虚拟机, 系统版本是Cent OS 7.2. 在安装软件的过程中, ...

  5. 企业级分布式监控系统--zabbix

    目录 1.Zabbix简介 2.zabbix安装 3.工作原理 4.监控功能 5.监控系统架构 6.Zabbix系统架构 7.Zabbix组件构成 8.zabbix监控环境中基本概念 正文 回到顶部 ...

  6. BZOJ 4562 搜索...

    思路: 统计入度&出度 每搜到一个点 in[v[i]]--,f[v[i]]+=f[t]; if(!in[v[i]])if(out[v[i]])q.push(v[i]);else ans+=f[ ...

  7. C#Cookie操作类，删除Cookie，给Cookie赋值

    using System;using System.Data;using System.Configuration;using System.Web;using System.Web.Security ...

  8. 【java基础】（1）Java的权限修饰符(public,protected,default,private)

    访问权限修饰符权限从高到低排列是public  ,protected  ,default, private. 一.根据“是否是同包”.“是否是子类”分为4中情况+本类 5种情况 二.把 同包中的子类 ...

  9. VMware中linux安装jdk

    首先安装linux系统 如何将jdk安装包复制到linux中不做概述,可以使用xftp工具,或者Xshell,或者其他方式. 1.下载jdk包:本章使用的为后缀为tar.gz的文件(不需要安装),如j ...

  10. 努比亚 N1 （Nubia NX541J） 解锁BootLoader 并刷入recovery

    本篇教程教你如何傻瓜式解锁BootLoader并刷入recovery 仅限于努比亚 N1 (Nubia NX541J)使用. 首先需要在设置-关于手机 找到版本号 然后手机快速连续点击来启用开发者模式 ...