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

【问题标题】：How do I center my navigation bar <LI> items CSS?如何将导航栏 <LI> 项 CSS 居中？
【发布时间】：2014-04-09 05:20:33
【问题描述】：

我希望我的导航栏 100% 穿过屏幕，但 LIST 项目都保持在左侧而不是居中，我确定它很简单，但我已经做了几个小时的 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>

【问题讨论】：

添加 HTML 会有所帮助，而 Fiddle 会更好。
我现在添加了我的html！

标签： html css list alignment

【解决方案1】：

试试这个：

.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;
 }

【讨论】：

非常感谢，直接粘贴进去就可以了，现在我明白为什么了！ :)

【解决方案2】：

没有看到 HTML 很难确定，因为您只发布了 css，但如果 .solidblockmenu 是 ul 或 ol，只需删除 float: left;来自它

【讨论】：

我现在已经添加了我的 html，顺便说一下删除浮动左侧不起作用！ :(
你一定要删除 float: left;从 ul 使其达到 100%。同时删除浮动：左；来自 li 标签内的 a 标签。因为这个浮动，所有内容都向左浮动，所以你的 ul 有 0 高度。

【解决方案3】：

我真的不明白你的菜单项应该以你的意见为中心是什么意思。我建议去掉所有不必要的 float:lefts，将 .solidblockmenu li 显示更改为 inline-block 并将 text-align:center 添加到 ul.solidblockmenu 本身

【讨论】：