Question

我继承了在Expression Engine中开发的网站，并且我注意到了一些问题。在主页http://trinidad.myguardiangroup.com/上右侧有一个无序列表，它在调整大小时有效，但由于某些原因，某些笔记本电脑（使用谷歌浏览器的PC笔记本电脑）列表不正确（夫妻图标未显示）。我试图通过CSS，我找到了这个;

/* Thumbnail Tray
----------------------------*/
 #thumb-tray {
    position:fixed;
    z-index:3;
    top:0;
    right:0;
    padding-right: 20px;
    margin-bottom: 5px;
    padding-top:35px;
    height:100%;
    width:110px;
    text-align:center;
}
#thumb-back, #thumb-forward {
    position:absolute;
    z-index:5;
    bottom:42px;
    height:108px;
    width:40px;
}
#thumb-back {
    left:0;
    background: url('../img/thumb-back.png') no-repeat center center;
}
#thumb-forward {
    right:0;
    background:url('../img/thumb-forward.png') no-repeat center center;
}
#thumb-back:hover, #thumb-forward:hover {
    cursor:pointer;
    background-color:rgba(256, 256, 256, 0.1);
}
#thumb-back:hover {
    border-right:1px solid rgba(256, 256, 256, 0.2);
}
#thumb-forward:hover {
    border-left:1px solid rgba(256, 256, 256, 0.2);
}
ul#thumb-list {
    display:inline-block;
    list-style:none;
    position:relative;
    left:0px;
    padding:0 0px;
    padding-top: 20px;
}
ul#thumb-list li {
    list-style:none;
    display:inline-block;
    height: 55px;
    max-width: 100%;
    overflow:visible;
    float:left;
    margin:0;
}
ul#thumb-list li img {
    width:45px;
    height:auto;
    opacity:0.9;
}
ul#thumb-list li.current-thumb img, ul#thumb-list li:hover img {
    opacity:1;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter:alpha(opacity=100);
}
ul#thumb-list li:hover {
    cursor:pointer;
}

但是我做的事情根本不影响列表...我想要做的就是缩小列表的大小以使其适合。

如果你们中任何一个人看到了解决这个问题的更有效方法，我很乐意并愿意学习。

<ul id="demo-block">
   <li>
      <div id="slidecaption"></div>
      <div id="thumb-tray" class="load-item">
         <div id="homeimage0" class="show0"><img src="http://myguardiangroup.com/images/hometext/life-home.png"class="homeimagesize"></div>
         <div id="homeimage1" class="show1"><img src="http://myguardiangroup.com/images/hometext/health-home.png" class="homeimagesize"></div>
         <div id="homeimage2" class="show2"><img src="http://myguardiangroup.com/images/hometext/pensions-home.png" class="homeimagesize"></div>
         <div id="homeimage3" class="show3"><img src="http://myguardiangroup.com/images/hometext/employee-home.png" class="homeimagesize"></div>
         <div id="homeimage4" class="show4"><img src="http://myguardiangroup.com/images/hometext/mutual-home.png" class="homeimagesize"></div>
         <div id="homeimage5" class="show5"><img src="http://myguardiangroup.com/images/hometext/privatewealth-home.png" class="homeimagesize"></div>
         <div id="homeimage6" class="show6"><img src="http://myguardiangroup.com/images/hometext/motor-home.png" class="homeimagesize"></div>
         <div id="homeimage7" class="show7"><img src="http://myguardiangroup.com/images/hometext/marine-home.png" class="homeimagesize"></div>
         <div id="homeimage8" class="show8"><img src="http://myguardiangroup.com/images/hometext/business-home.png" class="homeimagesize"></div>
         <div id="homeimage9" class="show9"><img src="http://myguardiangroup.com/images/hometext/residential-home.png" class="homeimagesize"></div>
         <div id="homeimage10" class="show10"><img src="http://myguardiangroup.com/images/hometext/personalaccident-home.png" class="homeimagesize"></div>
         <div id="homeimage11" class="show11"><img src="http://myguardiangroup.com/images/hometext/travel-home.png" class="homeimagesize"></div>
      </div>
   </li>
</ul>

Answer 1

this has nothing to do with the list, the problem is your footer. Its overlapping the content. Fix the positioning of the footer (which has fixed instead of relative positioning) or else add overflow-y:auto; to your content div

无序列表CSS问题

1 个答案: