您的位置：首页 > 网站优化 > css  >  css控制导航栏的居中

css控制导航栏的居中

 更新时间：2017年7月6日 23:13  点击：1407

在学习的过程中，我希望能够得到css的导航栏也能够居中的效果
但是，使用普通的text-align:center;
不起作用，经过在网上搜索
在经典论坛得到链接，uk的cssplay网站上公布了两种使其居中的方法
其中有一个使用了非常奇怪的del标签，不知道是为什么
但是总算解决掉了一个问题仍然很高兴

 代码如下 复制代码
#menu1 {
width:408px;
padding:0;
margin:0 auto;
list-style-type:none;
}
#menu1 li {
float:left;
width:100px;
border:1px solid #fff;
}
#menu1 a {
display:block;
width:100px;
color:#000;
background:#d4d4d4;
text-align:center;
padding:4px 0;
text-decoration:none;
float:left;
}
#menu1 a:hover {
color:#fff;
background:#08c;
}
#menu2 {
display:table;
padding:0;
margin:0 auto;
list-style-type:none;
white-space:nowrap;
}
#menu2 li {
display:table-cell;
}
* html #menu2 li {
float:left;
}
#menu2 a {
width:auto;
display:block;
padding:4px 16px;
color:#fff;
background:#08c;
border:1px solid #fff;
text-decoration:none;
}
* html #menu2 a {
float:left;
}
#menu2 a:hover {
color:#000;
background:#d4d4d4;
}
.container {clear:both; text-decoration:none;}
* html .container {display:inline-block;}
XHTML<ul id="menu1">
<li><a href="#nogo">Tab One</a></li>
<li><a href="#nogo">Tab Two</a></li>
<li><a href="#nogo">Tab Three</a></li>
<li><a href="#nogo">Tab Four</a></li>
</ul>
<del class="container">
<ul id="menu2">
<li><a href="#nogo">Tab One</a></li>
<li><a href="#nogo">Tab Two: Longer</a></li>
<li><a href="#nogo">Tab Three: Longest</a></li>
<li><a href="#nogo">Tab Four</a></li>
</ul>
</del>
[!--infotagslink--]

相关文章

  • uniapp实现可以左右滑动导航栏

    这篇文章主要为大家详细介绍了uniapp 实现可以左右滑动导航栏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2020-10-21

  • vue-admin-template配置快捷导航的代码（标签导航栏）

    这篇文章主要介绍了vue-admin-template配置快捷导航的方法（标签导航栏），本文通过实例代码给大家介绍的非常详细，对大家学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2020-09-04

  • 使用jQuery.Pin垂直滚动时固定导航

    这篇文章主要为大家详细介绍了使用jQuery.Pin垂直滚动时固定导航的方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2017-05-27

  • BootStrap 附加导航组件

    Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架,主要基于 HTML、CSS、JAVASCRIPT 的。接下来通过本文给大家介绍BootStrap 附加导航组件的知识，感兴趣的朋友一起学习吧...2016-07-29

  • jQuery实现的导航下拉菜单效果

    这篇文章主要介绍了jQuery实现的导航下拉菜单效果,涉及jQuery响应鼠标事件动态操作页面元素的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下...2016-07-06

  • 基于jQuery实现鼠标点击导航菜单水波动画效果附源码下载

    这篇文章主要介绍了基于jQuery实现鼠标点击导航菜单水波动画效果附源码下载，需要的朋友参考下...2016-01-08

  • Vue实现tab导航栏并支持左右滑动功能

    本文给大家介绍利用Vue实现tab导航栏，并且通过flex布局实现左右滑动效果，通过代码给大家分享tab导航栏布局的实现，本文给大家展示了完整代码，需要的朋友参考下吧...2021-06-28

  • 微信小程序实现导航功能的操作步骤

    这篇文章主要给大家介绍了关于微信小程序实现导航功能的操作步骤，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2021-03-10

  • 一步步教大家编写酷炫的导航栏js+css实现

    一步步教大家编写酷炫的导航栏，js+css实现黑色经典导航栏，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2016-03-18

  • Bootstrap导航栏各元素操作方法(表单、按钮、文本)

    这篇文章主要介绍了Bootstrap导航栏各元素操作方法，针对表单、按钮、文本进行操作，感兴趣的小伙伴们可以参考一下...2015-12-29

  • Bootstrap3制作自己的导航栏

    这篇文章主要教会大家如何利用Bootstrap3制作自己的导航栏，设计自己喜欢的元素、样式，感兴趣的小伙伴们可以参考一下...2016-05-14

  • CSS中position属性之fixed实现div居中

    这篇文章主要介绍了CSS中position属性之fixed实现div居中的相关资料,需要的朋友可以参考下...2015-12-16

  • Bootstrap多级导航栏(级联导航)的实现代码

    这篇文章主要介绍了Bootstrap多级导航栏的实现代码的相关资料,需要的朋友可以参考下...2016-03-10

  • jQuery实现网页顶部固定导航效果代码

    这篇文章主要介绍了jQuery实现网页顶部固定导航效果代码,涉及jQuery响应scroll事件动态操作页面元素样式的相关技巧,需要的朋友可以参考下...2015-12-25

  • CSS3 media queries结合jQuery实现响应式导航

    这篇文章主要为大家详细介绍了CSS3 media queries结合jQuery实现响应式导航,具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2016-10-02

  • Bootstrap实现响应式导航栏效果

    这篇文章主要介绍了Bootstrap实现响应式导航栏效果，导航栏是一个很好的功能，是Bootstrap网站的一个突出特点，本文带领大家学习实现Bootstrap导航栏,需要的朋友可以参考下...2015-12-29

  • 在ASP.NET 2.0中操作数据之三：创建母版页和站点导航

    本文主要介绍在ASP.NET如何创建母版页以及站点地图等操作，母版页的实现的功能有点类似自定义用户控件，可以实现网站页面统一的设计和布局。...2021-09-22

  • Magento 修正来自首页的产品页面包屑导航

    本文章来给各位朋友介绍Magento 修正来自首页的产品页面包屑导航实现方法，如果产品是从Category产品列表中进入Product详细页面，则面包屑导航中含有Category Path; 否则...2016-11-25

  • jQuery实现B2B网站后台管理系统侧导航

    这篇文章主要介绍了jQuery实现B2B网站后台管理系统侧导航，文中示例代码非常详细，帮助大家更好的理解和学习，感兴趣的朋友可以了解下...2020-07-09

  • css实现漂亮的垂直导航样式

    垂直导航效果要如何实现呢，下面我们来看一篇关于css实现漂亮的垂直导航样式，具体的例子如下文介绍，希望文章对各位有帮助。 幻灯片滑动切换的时候，需要做个切换的导航...2017-01-22