1

コンテナの左側にメニューが垂直になっている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>

これが私のメニューの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で最も行われると思いますが、私は間違っている可能性があります。どうもありがとうございます！

4

1 に答える 1

0

あなたの指摘が正しければ、垂直メニュー項目は画面解像度に応じて流動的な幅にする必要があります。

.menu li{
    display: block;
    margin:5px;
    padding: 5px;
    background-color: red;
    white-space: nowrap;
    overflow: hidden; 
   text-overflow: ellipsis;
}
于 2013-03-12T13:54:01.690 に答える