[英]CSS centre a <ul> tag within div problems
我试图将UL标签居中放置在DIV中,但是遇到了一些问题。 我已经尝试了很多东西。 该代码附在下面。 UL是一个水平列表。
<!-- Header -->
<div id="header">
<div class="container">
<!-- Nav -->
<nav id="nav">
<ul>
<li <?php if($currenturl == 'index.php') { ?>class="active"<?php } ?>><a href="index.php">Home</a></li>
<li <?php if($currenturl == 'limitededitions.php') { ?>class="active"<?php } ?>><a href="limitededitions.php">Limited Editions</a></li>
<li <?php if($currenturl == 'left-sidebar.php') { ?>class="active"<?php } ?>><a href="left-sidebar.php">Products</a></li>
<li <?php if($currenturl == 'services.php') { ?>class="active"<?php } ?>><a href="services.php">Services</a></li>
<li <?php if($currenturl == 'suppliers.php') { ?>class="active"<?php } ?>><a href="suppliers.php">Suppliers</a></li>
<li <?php if($currenturl == 'right-sidebar.php') { ?>class="active"<?php } ?>><a href="right-sidebar.php">About</a></li>
<li <?php if($currenturl == 'no-sidebar.php') { ?>class="active"<?php } ?>><a href="no-sidebar.php">Contact</a></li>
<li><a target="_blank" href="https://www.paypal.com/cgi-bin/webscr?cmd=_cart&business=WEM898SE24RZL&display=1">View Cart</a></li>
</ul>
</nav>
</div>
</div>
<!-- Header -->
/*********************************************************************************/
/* Header */
/*********************************************************************************/
#header
{
position: relative;
background: #FFF;
}
#header .container
{
position: relative;
padding: 3em 0em;
}
/*********************************************************************************/
/* Nav */
/*********************************************************************************/
#nav
{
position: relative;
top: 1em;
}
#nav > ul > li
{
float: left;
}
#nav > ul > li:last-child
{
padding-right: 0;
}
#nav > ul > li > a,
#nav > ul > li > span
{
display: block;
padding: 0.80em 1.2em;
letter-spacing: 0.06em;
text-decoration: none;
text-transform: uppercase;
font-size: 1.1em;
outline: 0;
color: #333;
}
#nav li.active a
{
background: #8B5A2B;
border-radius: 5px;
color: #FFF;
}
#nav > ul > li > ul
{
display: none;
}
任何帮助将不胜感激! 谢谢。
我无法完全说出您要如何确定这一点。 不过您的浮动余额没有帮助,是100%必要吗? 无论如何,这里有一个Codepen向您展示了一种实现方式,但不确定是否是您想要的方式。
我假设这是常规导航,需要居中在页面中间并内联。
http://codepen.io/anon/pen/qEQodo
更改了CSS:
#nav {
position: relative;
top: 1em;
text-align:center;
margin:0 auto;
}
#nav > ul {
margin:0 auto;
text-align:center;
position:relative;
display:block;
}
#nav > ul > li {
display:inline;
list-style-type:none;
margin:10px;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.