我有一个布局 960gs,容器左侧有一个垂直菜单。我希望它适用于所有分辨率的 PC(我不喜欢智能手机或平板电脑)。
这是我的代码菜单 HTML
<ul>
<li class='<?php echo $class2 ?>'><a href='index.php'><img src='<?php echo base_url();?>resources/img/home.png'><br>Home</a></li>
<li class='<?php echo $class1 ?>'><a href='<?php echo base_url();?>mind'><img src='<?php echo base_url();?>resources/img/user.png'><br>Profile</a></li>
<li class='<?php echo $class3 ?>'><a href='<?php echo base_url();?>search'><img src='<?php echo base_url();?>resources/img/searching.png'><br>Search</a></li>
<li class='<?php echo $class4 ?>'><a href='index.php'><img src='<?php echo base_url();?>resources/img/contact.png'><br>Contacts</a></li>
<li class='<?php echo $class5 ?>'><a href='<?php echo base_url();?>page'><img src='<?php echo base_url();?>resources/img/book.png'><br>Personal Page</a></li>
<li class='<?php echo $class6 ?>'><a href='index.php'><img src='<?php echo base_url();?>resources/img/company.png'><br>Personal Page</a></li>
</ul>
这是我的 menù CSS:
/*menu */
.laterale ul {
margin-top:-1px;
display: inline-block;
z-index: 20;
margin-left:20px;
float: left;
}
.laterale li {
width:88px;
height:60px;
list-style: none;
padding-top:15px;
margin-top:5px;
font-size:10px;
text-align: center !important;
display: block;
}
.laterale a {
text-decoration: none;
padding: 15px 0px;
color: #aaa;
text-shadow: 0px 1px 0px #fff;
border-top: 1px solid transparent;
border-bottom: 1px solid transparent;
border-left: none;
border-right: none;
background: transparent;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
opacity:0.8;
}
我认为这主要是通过响应式 CSS 完成的,但我可能是错的。 非常感谢!
最佳答案
如果我没听错,垂直菜单项的宽度应根据屏幕分辨率而定。
.menu li{
display: block;
margin:5px;
padding: 5px;
background-color: red;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
关于css - 垂直菜单响应,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15238757/