有一个Navbar< div>,里面是一个< ul>和每个< li>包含< a>带有链接(这是一个导航栏)
我看了谷歌和这个网站,我Couldnt找到我正在寻找什么。
我想要的是能够保持我当前的风格(使用< li>与< a>的内部),我想要< li>以均匀分布和居中(如果它们均匀分布则该部分是自然的…)在< ul> (位于navbar< div>内)。
无论如何,如果这没有意义让我知道,目前他们只是左对齐…我知道我有:
HTML:
<div class="navbar"> <ul> <li><a href="Home">Home</a></li> <li><a href="discounts">discounts</a></li> <li><a href="Contact">Contact Us</a></li> <li><a href="About">About Us</a></li> </ul> </div>
CSS:
.navbar { width: 100%; margin-left: auto ; margin-right: auto ; background-color: #ABCDEF; } .navbar ul { list-style-type: none; /*to remove bullets*/ text-align: center; margin: 0px; padding: 0px; width: 90%; overflow: hidden; } .navbar li{ float: left; padding: 2px; width: 150px; margin-left: auto ; margin-right: auto ; }
我也可以包括我的.navbar a {}如果是必要的。
我非常新的CSS,所以去容易,也是我看过所有的SO和谷歌第一,Couldnt找到任何东西很像这样(虽然也许,因为我是新的,我不认识它的一样)。
如果这是一个错误的CSS方法和/或有一个更容易,更常用的方法这样做。继续和链接/ post,而不是,但我更喜欢这种方式,因为它是最有意义的我。
谢谢
解决方法
如果不想指定90%宽度,则允许无宽度居中动态ul:
<!doctype html> <div class="navbar"> <div id="for-ie"> <ul> <li><a href="Home">Home</a></li> <li><a href="discounts">discounts</a></li> <li><a href="Contact">Contact Us</a></li> <li><a href="About">About Us</a></li> </ul> </div> </div> <style> .navbar { width: 100%; margin-left: auto ; margin-right: auto ; background-color: #ABCDEF; } .navbar ul { list-style-type: none; /*to remove bullets*/ text-align: center; margin: 0 auto; padding: 0px; border:1px solid red; display:table; overflow: hidden; } .navbar li{ float: left; padding: 2px; width: 150px; margin-left: auto ; margin-right: auto ; } </style> <!--[if IE]> <style> #for-ie { text-align:center; } #for-ie ul { display:inline-block; } #for-ie ul { display:inline; } </style> <![endif]-->
测试在IE6,FX 3。
编辑:没有无关元素的替代样式:
<!doctype html> <div class="navbar"> <ul> <li><a href="Home">Home</a></li> <li><a href="discounts">discounts</a></li> <li><a href="Contact">Contact Us</a></li> <li><a href="About">About Us</a></li> </ul> </div> <style> .navbar { width: 100%; margin-left: auto ; margin-right: auto ; background-color: #ABCDEF; } .navbar ul { list-style-type: none; /*to remove bullets*/ text-align: center; padding: 0px; zoom:1; border:1px solid red; overflow: hidden; } .navbar li{ padding: 2px; width: 150px; display:inline-block; } </style> <!--[if IE]> <style> .navbar li { display:inline; } </style> <![endif]-->
原文地址:https://www.jb51.cc/css/220461.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。