当前位置: 动力学知识库 > 问答 > 编程问答 >

html - Navigation goes to next line in lower resolution

问题描述:

Here is the CSS:

#module{position: relative; z-index: 1001; width: 1024px; margin: 0 auto; display: block;}

#module:after{clear: both; display: block; content: "."; line-height: 0; height: 0; visibility: hidden; overflow: hidden;}

.top-menu{display: -moz-box; margin: 0; padding: 0; clear: both;}

.top-menu ul{float: left; list-style: none; background: #00AAAA; margin: 0; padding: 0; display: inline;}

.top-menu ul li{display: inline; margin: 0; padding: 0;}

.top-menu ul li a{display: block; float: left; width: 139px; margin: 0; padding: 6px 0; font: 20px "Consolas, Calibri, Arial"; text-align: center; border-right: 1px solid 006666; color: #ffffff; text-decoration: none;}

.top-menu ul li a.last{width: 43px;}

.top-menu ul li a:hover{background: #006666;}

.top-menu ul li a.active, .top-menu ul li a.active:hover{background: #000000;}

Here is the html:

<div class="top-menu" id="module">

<ul>

<li><a class="active" href="#">Home</a></li>

<li><a href="#">Link1</a></li>

<li><a href="#">Link2</a></li>

<li><a href="#">Link3</a></li>

<li><a href="#">Link4</a></li>

<li><a href="#">Link5</a></li>

<li><a href="#">Link6</a></li>

<li><a class="last" href="#">?</a></li>

</ul>

</div>

I face the problem when lowering resolution it goes on next line (the last one).

分享给朋友:
您可能感兴趣的文章:
随机阅读: