1

我尝试使用 HTML 和 CSS 为我的通知 div 制作一个 vertscrolling div（在按下通知图标之前它是一个不显示的 div）但它失败了，至少在 chrome 中浏览器向我显示了滚动条但我无法控制它（不能滑动那个矩形，当我单击箭头时没有任何反应）我已经尝试了溢出-y 属性和滚动属性，但没有任何效果 仅供参考我有 4 个通知框，它们彼此重叠，并且仅在正确时显示单击图标（一个用于通知，一个用于消息，另一个用于友谊请求，最后一个用于论坛通知） HTML 是这样的：

<div id="infoNot" >
  <ul>
      <a href=''><li>Foulan a accépter votre demande d'amitié</li></a>
      <a href=''><li>Foulan a poster dans le forum</li></a>
      <a href=''><li>Foulan a bla bla bla</li></a>
      <a href=''><li>Foulan a accépter votre demande d'amitié</li></a>
      <a href=''><li>Foulan a poster dans le forum</li></a>
      <a href=''><li>Foulan a bla bla bla</li></a>
      <a href=''><li>Foulan a accépter votre demande d'amitié</li></a>
      <a href=''><li>Foulan a poster dans le forum</li></a>
      <a href=''><li>Foulan a bla bla bla</li></a>
      <a href=''><li>Foulan a accépter votre demande d'amitié</li></a>
      <a href=''><li>Foulan a poster dans le forum</li></a>
      <a href=''><li>Foulan a bla bla bla</li></a>
      <a href=''><li>Foulan a accépter votre demande d'amitié</li></a>
      <a href=''><li>Foulan a poster dans le forum</li></a>
      <a href=''><li>Foulan a bla bla bla</li></a>
      <a href='' class="cMore">
      <li class="cMore">Voir toutes les notifications</li></a>
  </ul>
</div>
<div id="infoMsg">
  <ul>
      <li><img src='media/images/icons/msg.png'><p class="sender">YOLO</p>
      <p class="description">Salut, Cava? wi non pas bien</p><span></span></li>
      <li><img src='media/images/icons/msg.png'><p>Salut</p><span></span></li>
      <li><img src='media/images/icons/msg.png'><p>Salut</p><span></span></li>
  </ul>
</div>
<div id="infoForum">
  <ul>
      <a href=''><li>Foulan a repondu à votre poste dans le forum</li></a>
      <a href=''><li>L'admin a supprimer votre sujet</li></a>
      <a href=''><li>bla bla bla</li></a>
  </ul>
</div>
<div id="infoFR">
   <ul>
     <a href=''><li>Foulan foulani veut étre votre ami</li></a>
     <a href=''><li>Fataan foulani veut étre votre ami</li></a>
     <a href=''><li>Mr. X foulani veut étre votre ami</li></a>
   </ul>
</div>

CSS：

#infoNot , #infoMsg , #infoForum , #infoFR
{
    top:50px;
    left:10px;
    display: block;
    position: absolute;
    margin-top: 5px;
    visibility: hidden;
    height: 100%;
}
#infoMsg
{
    left:25px;
    height: 500px;
}
#infoNot ul , #infoMsg ul , #infoForum ul , #infoFR ul
{
    list-style: none;
    width: 80%;
    margin-right: auto;
    margin-left: auto;
    background-color: white;
    border: 1px black solid;
    border-radius: 5px 5px 5px 5px;
}
#infoNot ul a
{
    display: block;
    width: 100%;
    height:100%;
}
#infoNot ul a:nth-child(even)
{
    color: #595959;
    background-color: #a1a1a1;
}
#infoNot ul a:nth-child(odd)
{
    color: #a1a1a1;
    background-color: #595959;
}
#infoNot ul a:hover
{
    background-color: #818181;
}
#infoMsg ul li img
{
    float:left;
    display: block;
}
#infoMsg ul li
{
    padding-top:3px;
    padding-buttom:3px;
    border-bottom: 1px solid #c4c4c2;
}
#infoMsg span
{
    clear:both;
    display: block;
}
4

0 回答 0