CSS如何让浮动导航栏元素居中显示

CSS如何让浮动导航栏元素居中显示:
制作导航栏是最为基础的布局技能之一,当然对于稍有经验的人员来说没有任何问题,不过对于初学者可能会有一定的困扰。普通的导航栏一般具有一下几个特点,整个导航栏居中,导航栏目具有,并且能够均匀分布,下面就是一个这样的简单代码实例。
代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css">
*{
  margin:0;
  padding:0;
  list-style:none;
}
body{text-align:center;}
li{
  float:left;
  font-size:12px;
}
a{
  float:left;
  border:1px solid #000;
  padding:5px 10px;
  text-decoration:none;
  color:#000;
}
ul{
  display:inline-block;
  *display:inline;
  zoom:1;
}
</style>
</head>
<body>
<ul>
  <li><a href="#nogo">首页</a></li>
  <li><a href="#nogo">关于</a></li>
  <li><a href="#nogo">产品</a></li>
  <li><a href="#nogo">联系我们</a></li>
  <li><a href="#nogo">留言</a></li>
</ul>
</body>
</html>

原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=11570

更多内容可以参阅:http://www.softwhy.com/divcss/

时间: 2024-10-26 17:26:08

CSS如何让浮动导航栏元素居中显示的相关文章

iOS在导航栏上居中显示分段控件(UISegmentedControl)

UISegmentedControl *segmentedControl = [[UISegmentedControl alloc] initWithItems:nil]; segmentedControl.tintColor = [UIColor orangeColor]; //渲染色彩 [segmentedControl insertSegmentWithTitle:@"专家介绍"atIndex:0 animated:NO]; [segmentedControl insertSeg

css制作最简单导航栏

css制作最简单导航栏 (1)先建一个列表: <ol> <li><a href="#">网易</a></li> <li><a href="#">搜狐</a></li> <li><a href="#">新浪</a></li> <li><a href="#"&

CSS了一个浮动导航条

绝对浏览器窗口定位positio:FIXED: 下拉后出现返回顶部按钮 图片是我们美工给做的.55*55px,中间缝隙3px. css: html,body { height:100%}html,body,form,input,span,p,img,ul,ol,li,dl,dt,dd { margin:0; padding:0; border:0}ul,ol { list-style:none}body { background:#fff; font:12px/1.5 arial,sans-se

如何使用css、布局横向导航栏

使用css布局横向导航栏,css应用给网页样式的方式,就相当于,给人怎么去穿上衣服,不同的衣服有不同的穿法,这里我们使用的是内联式.在这里 我们可以适当的把值调的大一点,这样我们就可以很容易的对比. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <htm

CSS实现动画特效导航栏

0 写在前面 今天用纯CSS编写了一种带有特效的导航栏,一方面巩固熟悉了导航栏的一般写法,另一方面练习了CSS3的一些新特性. 1 实现效果 当鼠标划过时,实现了一种动态百叶窗效果. 2 实现细节 2-0 导航栏基本架构 首先复习导航栏的基本架构,导航栏的实现,采用的是ul-li的结构,为了能够实现导航效果,可以在li内部增加一个a标签. 实现导航栏结构的html代码如下: 1 <div class="container"> 2 <ul class="men

通过html和css做出下拉导航栏的效果

引用前请标明出处:http://www.cnblogs.com/zkhzz/ 谢谢 通过观察了百度的首页,对于更多产品一栏,觉得可以不涉及JS便可写出下拉导航栏的效果 1.先设计出大体的框架 <div class="nav"> <ul> <li><a href="#">新闻</a></li> <li><a href="#">hao123</a&g

css如何让自适应宽度的块居中显示

<div class='footer'> <ul> <li>网站首页</li> <li>企业招聘</li> <li>联系我们</li> <li>讲师招聘</li> </ul> </div> .footer{ width: 100%; height: 100px; background: black; position: fixed; bottom: 0; text

HTML元素居中显示

margin <div style="margin:300px auto,background-color:red,width:100px,height:100px"></div> 左右相对于父级元素居中,上下距离需要计算 ps:当为margin设置一个参数时代表上下左右;两个上下\左右;三个上\左右\下. 上下两个相邻元素的margin会相互覆盖取最大值,左右不重合 <div style="margin:auto;background-colo

浅谈css中一个元素如何在其父元素居中显示

css如何垂直居中一个元素的问题已经是一个老生常谈的问题了.不管对于一个新手或者老手,在面试过程中是经常被问到的.前两天在看一个flex的视频教程,当中提到了有关元素的居中问题,所以今天小编就来扒一扒几种常见的方式.不足之处请大家批评指正(所有的代码都是自己亲手敲过可用的) 1.水平居中(margin:0 auto;) 关于这个,大家应该是最不陌生的,不管是在培训班还是自己自学的话 .这个应该是老师讲的第一个方法了(水平方向上),但是其有一个前提,就是被包裹的元素不能有浮动的属性.否则的话这个属