我试图将菜单与导航栏的中心对齐但是它保持对齐。
以下是我的CSS。我已经尝试了所有我能想到的......但我想这是我错过的一件小事。
如何让它居中？
我的css：
.page-wrap {
width: 100%;
height: 100%;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}
.header {
background-color: #00FF00;
width: auto;
margin-top: 20px;
margin-bottom: 20px;
}
body{ -webkit-animation: bugfix infinite 1s; }
@-webkit-keyframes bugfix { from {padding:0;} to {padding:0;} }
#toggle, .toggle { display: none; }
/* micro clearfix */
.clearfix:before, .clearfix:after { display: table; content: ""; }
.clearfix:after { clear: both; }
.toggle{
z-index: 2;
}
/* reset padding and margin where necessary etc. */
ul {
list-style-type: none;
margin: 0;
padding: 0px;
z-index: 2;
}
a {
text-decoration: none;
font-size:x-larger;
}
/* just some quick demo styles for color whatnot */
nav {
background: #efefef;
color: white;
z-index: 2;
}
nav ul ul {
background: #efefef;
z-index: 2;
width:150px;
}
nav ul ul ul {
background: #efefef;
z-index: 2;
}
nav a {
color: white;
white-space:nowrap;
}
nav a:hover {
background: ##bbeecc;
}
/* important functional styles */
nav > ul:after {
/* clear the float */
content:'';
clear:both;
display: block;
}
nav li {
/* for the topmost level we want them to float. will be overridden */
float:left;
font-size: large;
}
nav li a {
/* always apply padding and display block to the a. better user experience. */
display:block;
padding: 10px;
font-size: large;
}
nav li ul li {
/* overridden floating here */
float: none;
font-size: large;
}
/* here is where all the positioning takes place */
nav li {
position:relative;
}
nav li ul {
position:absolute;
left: 0; /* for top most level lets align to the left */
top: 100%; /* and have it at the bottom of the parent */
display:none; /* hide initialy */
}
nav li ul li ul {
left: 100%; /* for grandchild level lets align to the right of the list item */
top: 0; /* and have it at the top of the parent li */
}
nav ul li a:hover + ul,
nav ul li a + ul:hover {
/* show only if the element or the immediately preceding anchor is hovered*/
display:block;
}
@media only screen and (max-width: 768px){
ul{
display: none;
opacity: 0;
width: auto;
height: auto;
background: #efefef;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
z-index: 3;
}
nav {
height:40px;
z-index: 3;
}
nav ul ul {
background: #efefef;
z-index: 3;
}
nav ul ul ul {
background: #efefef;
z-index: 3;
}
nav a {
color: white;
}
nav ul{
position: relative;
width:200px;
z-index: 3;
}
ul li {
float:none;
display: block;
width: auto;
margin: 0 0 0 0px;
height: auto;
font-size:12px;
}
ul li a {
float:none;
display: block;
width: auto;
text-decoration: none;
margin: 0 0 0 0;
color:#fff;
height: auto;
}
/* here is where all the positioning takes place */
nav li {
position:relative;
}
nav li ul {
position:absolute;
left: 100%; /* for top most level lets align to the left */
top: 0%; /* and have it at the bottom of the parent */
display:block; /* hide initialy */
}
nav li ul li {
position:relative;
}
nav li ul li ul {
left: 100%; /* for grandchild level lets align to the right of the list item */
top: -25%; /* and have it at the top of the parent li */
}
.toggle { display: block; position: relative; user-select: none;z-index: 3; }
#toggle:checked ~ ul { display: block; opacity: 1;z-index: 3; }
ul li a:hover, ul li a:focus{
background: ##bbeecc;
}
nav ul li a:hover + ul,
nav ul li a + ul:hover {
/* show only if the element or the immediately preceding anchor is hovered*/
display:block;
opacity:1;
z-index: 3;
}
.toggle:after {
content: 'MENU';
display: block;
width: auto;
margin: 0px;
padding-top: 10px;
padding-left: 10px;
padding-bottom: 10px;
font-size: x-large;
color: #FFFFFF;
background: #efefef;
z-index: 3;
}
.toggle:hover:after{
background: #efefef;
}
#toggle:checked + .toggle:after{
content: 'CLOSE MENU';
z-index: 3;
}
}