Question

当浏览器页面为完整大小时，菜单位于中间页面的中心位置（这是正确的位置）但是在调整窗口大小时，除了滚动到最大值外，菜单不再可见网站的权利。我把它看成是一个响应问题，但是我没有解决它。任何想法??

HTML：

<div id="menu" class="menu">
        <ul class="headlines">
            <li id="item1"onclick="checklist(this)"><button onclick="myFunction()">AA</button></li>
            <li id="item2"><button onclick="myFunction2()">A </button></li>
            <li id="item3">B      </li>
            <li id="item4">C      </li>
            <li id="item5">D      </li>
            <li id="item6">E      </li>
            <li id="item7">F      </li>
        </ul>
        </div>

的CSS：

lu, li{
    list-style-type: none;
    font-size: 1.5em;
    height: 40px;
    width: 150px;
    text-align: right;    
    border-style: none;
}

.menu{

    width:150px;
    height: 350px;

}



.menu li{  
position: relative;
  top:150px;
  bottom: 0;
  left: 725px;
  right: 0;
  margin: auto; 
  border-style:none;  
}

Answer 1

在SELECT DISTINCT t1.classid, t1.sectionid, t2.subjectid, t3.examid FROM `tbl_A` As t1 JOIN `tbl_B` t2 ON t1.classid = t2.classid JOIN `tbl_C` t3 ON t1.classid = t3.classid

中添加margin:0 auto;

从.menu

中删除left: 725px;

请参阅小提琴：https://jsfiddle.net/sachinkk/61capLqy/

＆＃13;

.menu li

＆＃13;

lu, li{
    list-style-type: none;
    font-size: 1.5em;
    height: 40px;
    width: 150px;
    text-align: right;    
    border-style: none;
}

.menu{

    width:150px;
    height: 350px;
    margin:0 auto;

}



.menu li{  
position: relative;
  top:150px;
  bottom: 0;
  right: 0;
  margin: auto; 
  border-style:none;  
}

＆＃13;

调整大小时的乱码菜单

1 个答案: