如何将导航栏项目 CSS 居中<LI>？

我希望我的导航栏在整个屏幕上100％，但列表项目全部保持在左侧而不是中心，我确定它很简单，但我一直在做HTML和CSS小时，我的大脑不再工作:(请帮助？

.solidblocktheme{ /*additional mega drop down menu style for this theme*/
border:5px solid #cd0000;
padding:0; /*remove default padding inside mega menu*/
}
.solidblocktheme p, .solidblocktheme .column{
padding:5px; /*add padding inside p and .column elements within mega menu*/
width:auto;
}
.solidblockmenu{
width: 100%;
margin: 0 auto;
padding: 0;
float: left;
font: bold 15px Arial;
overflow: hidden;
margin-bottom: 1em;
border: 1px solid #625e00;
border-width: 1px 0;
background: black url(Images/blockdefault.gif) center center repeat-x;
}
.solidblockmenu li{
display: inline;
margin: 0 auto;
}
.solidblockmenu li a{
float: left;
color: white;
padding: 9px 11px;
text-decoration: none;
border-right: 1px solid white;
}
.solidblockmenu li a:visited{
color: white;
}
.solidblockmenu li a:hover, .solidblockmenu li a.selected{ /*Selected Tab style*/
color: white;
background: transparent url(Images/blockactive.gif) center center repeat-x;
}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>New Website Layout</title>
<link rel="stylesheet" type="text/css" href="cssLayout.css">
<link rel="stylesheet" type="text/css" href="ddmegamenu.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script src="ddmegamenu.js">
/***********************************************
* DD Mega Menu (c) Dynamic Drive (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for this script and 100s more.
***********************************************/
</script>
<script>
ddmegamenu.docinit({
    menuid:'solidmenu',
    dur:1000 //<--no comma after last setting
})

ddmegamenu.docinit({
    menuid:'megaanchorlink',
    dur:500,
    easing:'easeInOutCirc' //<--no comma after last setting
})
</script>
</head>
<body>

<ul id="solidmenu" class="solidblockmenu">
<li><a href="">Home</a></li>
<li><a href="">About Us</a></li>
<li><a href="">Images</a></li>
<li><a href="" rel="jkmenu">Events v</a></li>
<li><a href="">Contact Us</a></li>
</ul>
<!--First mega menu (1) -->
<div id="jkmenu" class="mega solidblocktheme">
    <p style="margin:5px 0 10px 0"><b>Choose from our clubs events!</b></p>
    <div class="column">
    <ul>
    <li><a href="">Snooker</a></li>
    <li><a href="">Darts</a></li>
    <li><a href="">Poker</a></li>
    <li><a href="">Quiz</a></li>
    <li><a href="">Cabaret</a></li>
    </ul>
    </div>
</div>

</body>
</html>

尝试以下：

.solidblockmenu {
     width: 100%;
     padding: 0;
     font: bold 15px Arial;
     overflow: hidden;
     margin-bottom: 1em;
     border: 1px solid #625e00;
     border-width: 1px 0;
     background: black url(Images/blockdefault.gif) center center repeat-x;
     text-align: center;
 }
 .solidblockmenu li {
     display: inline-block;
     margin: 0 auto;
 }
 .solidblockmenu li a {
     color: white;
     padding: 9px 11px;
     text-decoration: none;
     border-right: 1px solid white;
 }

而没有看到html，很难确定，因为您只发布了CSS，但是如果.solidblockmenu是UL或OL，则只需删除float：左；从中

我不太了解您的菜单项应以您的意见为中心。我建议摆脱所有不中断的float:left S，将.solidblockmenu li显示为inline-block，然后将text-align:center添加到ul.solidblockmenu本身

相关内容

最新更新

热门标签：