Question

我希望我的导航栏在屏幕上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>

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

Answer 2

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

Answer 3

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

如何将导航栏<li>项目CSS中心？</li>

3 个答案: