我在整个文档中运行媒体查询,但在这里我只是想解释一下发生了什么。是否有可能让这个菜单保持居中,无论它在哪个设备上?因此,当没有足够的空间允许所有菜单项保持在一行时,它将其余部分放在下面的行上,然后居中屏幕上的那些,而不是开始新行从左边?它可能与我在菜单上留下的浮动有关,但这是我可以将它们保持横向滚动条的唯一方法。谢谢。
下面是HTML和CSS,但我建议在JSFiddle上查看它:https://jsfiddle.net/rt518s7p/
HTML:
<nav id="page-navigation">
<ul>
<li><a href="../../index.html" title="Home">Home</a></li>
<ul class="top-menu">
<li><a href="../../_portfolio/photography.html" onclick="return false">Photography</a>
<ul class="sub-menu">
<li><a href="../../_portfolio/_photography/bmc-himley-mini-show-2015.html">BMC Himley Mini Show 2015</a></li>
<li><a href="../../_portfolio/_photography/kinver-snow.html">Kinver Snow</a></li>
<li><a href="../../_portfolio/_photography/mini-runs-collection.html">"Mini Runs" Collection</a></li>
<li><a href="../../_portfolio/_photography/hofner-bass.html">Hofner Bass</a></li>
<li><a href="../../_portfolio/_photography/nature.html">Nature</a></li>
<li><a href="../../_portfolio/_photography/haynes-motor-museum.html">Haynes Motor Museum</a></li>
<li><a href="../../_portfolio/_photography/miscellaneous.html">Miscellaneous</a></li>
<li><a href="../../_portfolio/_photography/classic-mini.html">Classic Mini</a></li>
</ul>
</li>
<li><a href="../../_portfolio/graphic-design.html" onclick="return false">Graphic Design</a>
<ul class="sub-menu">
<li><a href="../../_portfolio/_graphic-design/story-bag-artwork.html">"Story Bag" Artwork</a></li>
<li><a href="../../_portfolio/_graphic-design/business-cards.html">Business Cards</a></li>
<li><a href="../../_portfolio/_graphic-design/logo-design.html">Logo Design</a></li>
<li><a href="../../_portfolio/_graphic-design/the-mexican-job.html">"The Mexican Job"</a></li>
<li><a href="../../_portfolio/_graphic-design/magazine-covers.html">Magazine Covers</a></li>
<li><a href="../../_portfolio/_graphic-design/wpap-artwork.html">WPAP Artwork</a></li>
<li><a href="../../_portfolio/_graphic-design/lyric-posters.html">Lyrics Posters</a></li>
</ul>
</li>
<li><a href="../../_portfolio/3d-modelling.html">3D Modelling</a></li>
</ul>
<li><a href="../../about.html">About</a></li>
<li><a href="../../recognition.html">Recognition</a></li>
</ul>
</nav>
CSS:
/*navigation*/
#page-navigation
{
width: 70%;
height: 53px;
margin-left: auto;
margin-right: auto;
margin-bottom: 10px;
}
#page-navigation ul li
{
color: white;
list-style: none;
background-color: darkslategray;
width: 9em;
float: left;
}
li
{
position: relative;
}
li.title
{
display: none;
}
li a
{
display: block;
color: white;
line-height: 1.3em;
padding: 1em;
text-align: center;
}
li a:link
{
text-decoration: none;
}
li a:visited
{
text-decoration: none;
color: white;
}
li a:hover, .top-menu > li:hover > a
{
background-color: rgb(48,48,48);
}
li a:active
{
background-color: dimgray;
}
ul.sub-menu
{
width: auto;
height: auto;
position: absolute;
left: -9000em;
overflow: hidden;
}
ul.sub-menu li
{
clear: left;
float: none;
margin-left: -2.5em;
z-index: 1000;
}
.top-menu li:hover ul
{
left: 0;
}
ul.sub-menu li a
{
height: auto;
border-bottom: 1px solid gray;
padding: .4em 1em;
background-color: dimgray;
padding-top: 1em;
padding-bottom: 1em;
}
ul.sub-menu li:last-child a
{
border-bottom: none;
}
ul.sub-menu li a:hover
{
background-color: darkslategray;
}
ul.sub-menu li a:active
{
background-color: gray;
}
ul.top-menu
{
padding: 0;
}