堆栈内存溢出
  简体   繁体   English

中心CSS导航菜单

[英]Center css navigation menu

 原文  2016-01-28 16:10:40  7   3    html/ css

问题描述

 #cssmenu, #cssmenu ul, #cssmenu ul li, #cssmenu ul li a { margin: 0; padding: 0; border: 0; list-style: none; line-height: 1; display: block; position: relative; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } #cssmenu:after, #cssmenu > ul:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; } #cssmenu { width: auto; border-bottom: 3px solid #47c9af; font-family: Raleway, sans-serif; line-height: 1; } #cssmenu ul { background: #ffffff; } #cssmenu > ul > li { float: left; } #cssmenu.align-center > ul { font-size: 0; text-align: center; } #cssmenu.align-center > ul > li { display: inline-block; float: none; } #cssmenu.align-right > ul > li { float: right; } #cssmenu.align-right > ul > li > a { margin-right: 0; margin-left: -4px; } #cssmenu > ul > li > a { z-index: 2; padding: 18px 25px 12px 25px; font-size: 15px; font-weight: 400; text-decoration: none; color: #444444; -webkit-transition: all .2s ease; -moz-transition: all .2s ease; -ms-transition: all .2s ease; -o-transition: all .2s ease; transition: all .2s ease; margin-right: -4px; } #cssmenu > ul > li.active > a, #cssmenu > ul > li:hover > a, #cssmenu > ul > li > a:hover { color: #ffffff; } #cssmenu > ul > li > a:after { position: absolute; left: 0; bottom: 0; right: 0; z-index: -1; width: 100%; height: 120%; border-top-left-radius: 8px; border-top-right-radius: 8px; content: ""; -webkit-transition: all .2s ease; -o-transition: all .2s ease; transition: all .2s ease; -webkit-transform: perspective(5px) rotateX(2deg); -webkit-transform-origin: bottom; -moz-transform: perspective(5px) rotateX(2deg); -moz-transform-origin: bottom; transform: perspective(5px) rotateX(2deg); transform-origin: bottom; } #cssmenu > ul > li.active > a:after, #cssmenu > ul > li:hover > a:after, #cssmenu > ul > li > a:hover:after { background: #47c9af; } 
 <!doctype html> <html lang=''> <head> <meta charset='utf-8'> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="styles.css"> <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script> <script src="script.js"></script> <title>CSS MenuMaker</title> </head> <body> <center> <div id='cssmenu'> <ul> <li class='active'><a href='#'>Home</a> </li> <li><a href='#'>Products</a> </li> <li><a href='#'>Company</a> </li> <li><a href='#'>Contact</a> </li> </ul> </div> </body> <html>

It Displays to the left, I already make the text-align center, and display:inline but it's still not displaying, and I want it to insert in my container, my containers width is about 60% any help with this? 它显示在左侧，我已经使文本居中对齐，并显示：inline，但仍未显示，我希望将其插入容器中，容器宽度大约有60％对此有帮助吗？

3 个解决方案

解决方案1
 0  2016-01-28 16:34:14

If you want to center your menu: 如果要居中菜单： 

#cssmenu ul {
  display: table;
}

http://codepen.io/anon/pen/GodGXm http://codepen.io/anon/pen/GodGXm

解决方案2
 0 已采纳  2016-01-28 16:36:08

I amended your markup to read: 我将您的标记修改为： 

<div class="container">
  <div id='cssmenu'>
    <ul>
      <li class='active'><a href='#'>Home</a></li>
      <li><a href='#'>Products</a></li>
      <li><a href='#'>Company</a></li>
      <li><a href='#'>Contact</a></li>
    </ul>
  </div>
</div>

Then added a new class: 然后添加一个新类： 

.container {
  width: 60%;
  margin: 0 auto;
}

解决方案3
 0  2016-01-28 18:05:11

I would do like this.. 我会这样。

The difference is: 区别在于： 

#cssmenu {
  text-align: center;
  line-height: 0;
}
#cssmenu ul {
  display: inline-block;
}

Here is my working example.. 这是我的工作示例。 

 @import url(http://fonts.googleapis.com/css?family=Raleway); #cssmenu, #cssmenu ul, #cssmenu ul li, #cssmenu ul li a { margin: 0; padding: 0; border: 0; list-style: none; line-height: 1; display: block; position: relative; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } #cssmenu { width: auto; border-bottom: 3px solid #47c9af; font-family: Raleway, sans-serif; line-height: 0; } #cssmenu ul { background: #ffffff; display: inline-block; } #cssmenu > ul > li { float: left; } #cssmenu.align-center > ul { font-size: 0; text-align: center; } #cssmenu.align-center > ul > li { display: inline-block; float: none; } #cssmenu.align-right > ul > li { float: right; } #cssmenu.align-right > ul > li > a { margin-right: 0; margin-left: -4px; } #cssmenu > ul > li > a { z-index: 2; padding: 18px 25px 12px 25px; font-size: 15px; font-weight: 400; text-decoration: none; color: #444444; -webkit-transition: all .2s ease; -moz-transition: all .2s ease; -ms-transition: all .2s ease; -o-transition: all .2s ease; transition: all .2s ease; margin-right: -4px; } #cssmenu > ul > li.active > a, #cssmenu > ul > li:hover > a, #cssmenu > ul > li > a:hover { color: #ffffff; } #cssmenu > ul > li > a:after { position: absolute; left: 0; bottom: 0; right: 0; z-index: -1; width: 100%; height: 120%; border-top-left-radius: 8px; border-top-right-radius: 8px; content: ""; -webkit-transition: all .2s ease; -o-transition: all .2s ease; transition: all .2s ease; -webkit-transform: perspective(5px) rotateX(2deg); -webkit-transform-origin: bottom; -moz-transform: perspective(5px) rotateX(2deg); -moz-transform-origin: bottom; transform: perspective(5px) rotateX(2deg); transform-origin: bottom; } #cssmenu > ul > li.active > a:after, #cssmenu > ul > li:hover > a:after, #cssmenu > ul > li > a:hover:after { background: #47c9af; } 
 <!doctype html> <html lang=''> <head> <meta charset='utf-8'> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="styles.css"> <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script> <script src="script.js"></script> <title>CSS MenuMaker</title> </head> <body> <center> <div id='cssmenu'> <ul> <li class='active'><a href='#'>Home</a></li> <li><a href='#'>Products</a></li> <li><a href='#'>Company</a></li> <li><a href='#'>Contact</a></li> </ul> </div> </body> <html>

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 HTML / CSS - 中心对齐UL导航菜单 - HTML / CSS - Center align a UL navigation menu Firefox的中心导航菜单的CSS代码不起作用 - Css code for center navigation menu is not working in firefox 如何居中对齐CSS导航菜单？ - How to center align CSS navigation menu? 中心导航菜单文本 - Center Navigation Menu Text 如何居中导航菜单 - how to center a navigation menu 居中导航菜单 - Center a navigation menu 导航菜单位于中心 - Navigation Menu in the center WordPress中的中心导航菜单 - Center navigation Menu in wordpress 如何居中此导航菜单 - How to center this navigation menu 如何居中导航菜单 - how to center navigation menu
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM