Question

我有一个960gs的布局，容器左边有一个垂直菜单。 menù我希望它适用于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ù：

/*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完成，但我可能是错的。非常感谢你！

Answer 1

如果我的观点正确，那么垂直菜单项应具有符合屏幕分辨率的流畅宽度。

.menu li{
    display: block;
    margin:5px;
    padding: 5px;
    background-color: red;
    white-space: nowrap;
    overflow: hidden; 
   text-overflow: ellipsis;
}

垂直菜单响应

1 个答案: