这段代码在桌面端可以正常工作,但是在移动端会自动左对齐,即使我知道自己的方法不正确。
我尝试使用@media添加一些代码,但是无法解决问题。
我主要尝试了right: float: padding:等属性,但是没有任何对齐命令起作用。
@media not all and (min-width: 780px) {
#centeredmenu { max-width: 220px; }
}
#centeredmenu {
clear:both;
min-width: 220px;
}
#centeredmenu ul {
margin:0;
padding:0;
list-style:none;
float:right;
position:relative;
right:50%;
}
#centeredmenu ul li {
margin:1px 0 0 1px;
padding:0;
float: left;
position: relative;
left:50%;
top:11px;
}
#centeredmenu ul li a {
z-index: 999;
display:block;
margin:0;
padding:.4em .2em .4em;
line-height:1em;
background:#ddd;
text-decoration:none;
color:#444;
width: 70px;
font-size: 13px;
font-weight: 100;
text-align: center;
font-family: Proxima Nova;
}
#centeredmenu ul li.active a {
color:#fff;
background:#D2383C;
}
#centeredmenu ul li a:hover {
background:#36f; /* Top menu items background colour */
color:#fff;
}
#centeredmenu ul li:hover a,
#centeredmenu ul li.hover a { /* This line is required for IE 6 and below */
background:#777777; /* Top menu items background colour */
color:#fff;
}
<div id="centeredmenu">
<ul>
<li class=""><a href="#">2014</a></li>
<li class="active"><a href="#">2013</a></li>
<li class=""><a href="#">2012</a></li>
<li class=""><a href="#">2011</a></li>
<li class=""><a href="#">2010</a></li>
<li class=""><a href="#">2009</a></li>
<li class=""><a href="#">2008</a></li>
<li class=""><a href="#">2007</a></li>
<li class=""><a href="#">2006</a></li>
<li class=""><a href="#">2005</a></li>
</ul>
</div>