为什么网页右边显示出现一大片空白
其他问答
1
问题遇到的现象和发生背景
问题相关代码
<!DOCTYPE html> <html> <head> <metaname=”viewport”content=”width=device-width,initial-scale=1″/> <title>百合网</title> <link rel="stylesheet" type="text/css" href="../css/bootstrap.css"/> <style type="text/css"> #bule{ color: #000000; } body{ background:white; } </style> </head> <body> <div > <div > <ul> <!--<li><a href=""><img src="../img/2345截图20210824085306.png"/ width="100px"></a></li>--> <!--<li id="bule"><a href="登录.html">登录</a></li> <li id="bule"><a href="注册页面.html">注册</a></li>--> <li id="bule"><a href="跳转.html">欢迎xxxx用户</a></li> <li id="bule"><a href="充值会员.html">充值会员 </a></li> <li id="bule"><a href="">设置 </a></li> <li id="bule"><a href="">消息</a></li> </ul> </div> </div> <style type="text/css"> *{ padding: 0; margin: 0; } .na{ background:#EDEDED; height: 36px; line-height: 36px; } .cente{ width: 80%; margin: auto; /* border: 1px solid red;*/ height: 46px; margin-left:870px; } ul li{ list-style: none; float: left; margin-left:5% ; } a{ text-decoration: none; color:yellow ; } ul li:hover>a{ background: white; } ul li:hover{ background: yellow; } </style> <div > <div > <ul> <li><a href=""><img src="../img/2345截图20210824085306.png"/ width="90px"></a></li> <li><a href="">网站首页</a></li> <li><a href="跳转.html">我的百合 </a></li> <li><a href="搜索1.html">搜索</a></li> <li><a href="视频.html">视频</a></li> <li><a href="百合相亲.html">百合相亲</a></li> <li><a href="百合婚礼.html">百合婚礼</a></li> <li><a href="联系我们.html">联系我们</a></li> <li><a href="跳转1.html">千万不要点哦</a></li> </ul> </div> </div> <style type="text/css"> *{ padding: 0; margin: 0; } .nav{ background: white; height: 46px; line-height: 46px; } .center{ width: 80%; margin: auto; /* border: 1px solid red;*/ height: 46px; margin-left:400px; } ul li{ list-style: none; float: left; margin-left:5% ; } a{ text-decoration: none; color:black ; } ul li:hover>a{ background: white; } ul li:hover{ background: white; } </style> <script type="text/javascript" src="../js/jquery.js"> </script> <script type="text/javascript" src="../js/bootstrap.js"> </script> <div > <div id="aa"> <!--多张图片--> <div > <div > <img src="../img/123.jpg"/> <!--标题--> <div > <h3>王哥喊你谈恋爱</h3> </div> </div> <div > <img src="../img/12354.jpg"/> <!--标题--> <div > <h3>王哥喊你谈恋爱</h3> </div> </div> <div > <img src="../img/321345.jpg"/> <!--标题--> <div > <h3>王哥喊你谈恋爱</h3> </div> </div> <div > <img src="../img/01 (25).jpg"/> <!--标题--> <div > <h3>王哥喊你谈恋爱</h3> </div> </div> <div > <img src="../img/01 (24).jpg"/> <!--标题--> <div > <h3>王哥喊你谈恋爱</h3> </div> </div> <div > <img src="../img/01 (27).jpg"/> <!--标题--> <div > <h3>王哥喊你谈恋爱</h3> </div> </div> </div> <!--指示图标--> <ol > <li data-target="#aa" data-slide-to="0" ></li> <li data-target="#aa" data-slide-to="1"></li> <li data-target="#aa" data-slide-to="2"></li> <li data-target="#aa" data-slide-to="3"></li> <li data-target="#aa" data-slide-to="4"></li> <li data-target="#aa" data-slide-to="5"></li> </ol> </div> </div> <script type="text/javascript"> $(function(){ //自动轮播 每隔一秒播放一次 $("#aa").carousel({ interval:1000 }); }) </script> <div > 王哥姻缘推荐 </div> <style type="text/css"> .abc{ margin-left: 60px; font-size: 50px; } </style> <div > <table border="0px solid" cellspacing="" cellpadding="" width="1120px"> <tr> <td><img src="../img/01.png"width="100px"></td> <td> <p>姓名:王洋</p> <p>年龄:12</p> <p>性别:女</p> <p>择偶要求:骨灰都给你杨了</p> <p></p><a href="聊天.html"><input type="button" name="" id="" value="找他聊天" /></a></li></th> <p><input type="button" id="" value="打声招呼" onclick="alertTips()"/></p> </td> <td><img src="../img/01.png"width="100px"></td> <td> <p>姓名:王洋</p> <p>年龄:12</p> <p>性别:女</p> <p>择偶要求:骨灰都给你杨了</p> <p></p><a href="聊天.html"><input type="button" name="" id="" value="找他聊天" /></a></li></th> </td> <td><img src="../img/01.png"width="100px"></td> <td> <p>姓名:王洋</p> <p>年龄:12</p> <p>性别:女</p> <p>择偶要求:骨灰都给你杨了</p> <p></p><a href="聊天.html"><input type="button" name="" id="" value="找他聊天" /></a></li></th> </td> <td><img src="../img/01.png"width="100px"></td> <td> <p>姓名:王洋</p> <p>年龄:12</p> <p>性别:女</p> <p>择偶要求:骨灰都给你杨了</p> <p></p><a href="聊天.html"><input type="button" name="" id="" value="找他聊天" /></a></li></th> </td> <td><img src="../img/01.png"width="100px"></td> <td> <p>姓名:王洋</p> <p>年龄:12</p> <p>性别:女</p> <p>择偶要求:骨灰都给你杨了</p> <p></p><a href="聊天.html"><input type="button" name="" id="" value="找他聊天" /></a></li></th> </td> <td><img src="../img/01.png"width="100px"></td> <td> <p>姓名:王洋</p> <p>年龄:12</p> <p>性别:女</p> <p>择偶要求:骨灰都给你杨了</p> <p></p><a href="聊天.html"><input type="button" name="" id="" value="找他聊天" /></a></li></th> </td> </tr> <tr> <td><img src="../img/01.png"width="100px"></td> <td> <p>姓名:王洋</p> <p>年龄:12</p> <p>性别:女</p> <p>择偶要求:骨灰都给你杨了</p> <p></p><a href="聊天.html"><input type="button" name="" id="" value="找他聊天" /></a></li></th> </td> <td><img src="../img/01.png"width="100px"></td> <td> <p>姓名:王洋</p> <p>年龄:12</p> <p>性别:女</p> <p>择偶要求:骨灰都给你杨了</p> <p></p><a href="聊天.html"><input type="button" name="" id="" value="找他聊天" /></a></li></th> </td> <td><img src="../img/01.png"width="100px"></td> <td> <p>姓名:王洋</p> <p>年龄:12</p> <p>性别:女</p> <p>择偶要求:骨灰都给你杨了</p> <p></p><a href="聊天.html"><input type="button" name="" id="" value="找他聊天" /></a></li></th> </td> <td><img src="../img/01.png"width="100px"></td> <td> <p>姓名:王洋</p> <p>年龄:12</p> <p>性别:女</p> <p>择偶要求:骨灰都给你杨了</p> <p></p><a href="聊天.html"><input type="button" name="" id="" value="找他聊天" /></a></li></th> </td> <td><img src="../img/01.png"width="100px"></td> <td> <p>姓名:王洋</p> <p>年龄:12</p> <p>性别:女</p> <p>择偶要求:骨灰都给你杨了</p> <p></p><a href="聊天.html"><input type="button" name="" id="" value="找他聊天" /></a></li></th> </td> <td><img src="../img/01.png"width="100px"></td> <td> <p>姓名:王洋</p> <p>年龄:12</p> <p>性别:女</p> <p>择偶要求:骨灰都给你杨了</p> <p></p><a href="聊天.html"><input type="button" name="" id="" value="找他聊天" /></a></li></th> </td> </tr> </table> </div> <style type="text/css"> .ppp{ margin-left: 390px; } </style> <script type="text/javascript"> function alertTips(){ alert("成功打招呼"); } </script> <div > <a href="充值会员.html"><img src="../img/2345截图20210824134203.png"/ width="1120px"> </a> </div> <style type="text/css"> .plp{ margin-left:390px ; } </style> <div > 成功故事 </div> <style type="text/css"> .abc{ margin-left: 390px; font-size: 50px; } li{ list-style: none; margin-left:30px ; } </style> <div > <table border="0px solid" cellspacing="" cellpadding="" width="1120px"> <tr> <th><a href=""><img src="../img/28.png"/ width="350px"></a> <li>一见钟情</li> </th> <th><a href=""><img src="../img/27.png"/ width="350px"></a> <li>一见钟情</li> </th> <th><a href=""><img src="../img/31.png"/ width="350px"></a> <li>一见钟情</li> </th> <!--<th><a href=""><img src="../img/a31.png"/ width="300px"></a> <li>一见钟情</li> </th>--> </tr> </table> </div> <style type="text/css"> .op{ margin-left:400px ; } </style> <div > 红娘服务 </div> <style type="text/css"> .abc{ margin-left: 390px; font-size: 50px; } </style> <div > <img src="../img/2345截图20210825094329.png" width="1120px"/> </div> <style type="text/css"> .pppp{ margin-left:390px ; } </style>
-
你设置了宽度 还设置了 margin-left 所以会导致这个问题
<!DOCTYPE html> <html> <head> <metaname=”viewport”content=”width=device-width,initial-scale=1″/> <title>百合网</title> <link rel="stylesheet" type="text/css" href="../css/bootstrap.css"/> <style type="text/css"> #bule{ color: #000000; } body{ background:white; } </style> </head> <body> <div > <div > <ul> <!--<li><a href=""><img src="../img/2345截图20210824085306.png"/ width="100px"></a></li>--> <!--<li id="bule"><a href="登录.html">登录</a></li> <li id="bule"><a href="注册页面.html">注册</a></li>--> <li id="bule"><a href="跳转.html">欢迎xxxx用户</a></li> <li id="bule"><a href="充值会员.html">充值会员 </a></li> <li id="bule"><a href="">设置 </a></li> <li id="bule"><a href="">消息</a></li> </ul> </div> </div> <style type="text/css"> *{ padding: 0; margin: 0; } .na{ background:#EDEDED; height: 36px; line-height: 36px; } .cente{ width: 80%; margin: auto; /* border: 1px solid red;*/ height: 46px; /* margin-left:870px; */ } ul li{ list-style: none; float: left; margin-left:5% ; } a{ text-decoration: none; color:yellow ; } ul li:hover>a{ background: white; } ul li:hover{ background: yellow; } </style> <div > <div > <ul> <li><a href=""><img src="../img/2345截图20210824085306.png"/ width="90px"></a></li> <li><a href="">网站首页</a></li> <li><a href="跳转.html">我的百合 </a></li> <li><a href="搜索1.html">搜索</a></li> <li><a href="视频.html">视频</a></li> <li><a href="百合相亲.html">百合相亲</a></li> <li><a href="百合婚礼.html">百合婚礼</a></li> <li><a href="联系我们.html">联系我们</a></li> <li><a href="跳转1.html">千万不要点哦</a></li> </ul> </div> </div> <style type="text/css"> *{ padding: 0; margin: 0; } .nav{ background: white; height: 46px; line-height: 46px; } .center{ width: 80%; margin: auto; /* border: 1px solid red;*/ height: 46px; /* margin-left:400px; */ } ul li{ list-style: none; float: left; margin-left:5% ; } a{ text-decoration: none; color:black ; } ul li:hover>a{ background: white; } ul li:hover{ background: white; } </style> <script type="text/javascript" src="../js/jquery.js"> </script> <script type="text/javascript" src="../js/bootstrap.js"> </script> <div > <div id="aa"> <!--多张图片--> <div > <div > <img src="../img/123.jpg"/> <!--标题--> <div > <h3>王哥喊你谈恋爱</h3> </div> </div> <div > <img src="../img/12354.jpg"/> <!--标题--> <div > <h3>王哥喊你谈恋爱</h3> </div> </div> <div > <img src="../img/321345.jpg"/> <!--标题--> <div > <h3>王哥喊你谈恋爱</h3> </div> </div> <div > <img src="../img/01 (25).jpg"/> <!--标题--> <div > <h3>王哥喊你谈恋爱</h3> </div> </div> <div > <img src="../img/01 (24).jpg"/> <!--标题--> <div > <h3>王哥喊你谈恋爱</h3> </div> </div> <div > <img src="../img/01 (27).jpg"/> <!--标题--> <div > <h3>王哥喊你谈恋爱</h3> </div> </div> </div> <!--指示图标--> <ol > <li data-target="#aa" data-slide-to="0" ></li> <li data-target="#aa" data-slide-to="1"></li> <li data-target="#aa" data-slide-to="2"></li> <li data-target="#aa" data-slide-to="3"></li> <li data-target="#aa" data-slide-to="4"></li> <li data-target="#aa" data-slide-to="5"></li> </ol> </div> </div> <script type="text/javascript"> $(function(){ //自动轮播 每隔一秒播放一次 $("#aa").carousel({ interval:1000 }); }) </script> <div > 王哥姻缘推荐 </div> <style type="text/css"> .abc{ margin-left: 60px; font-size: 50px; } </style> <div > <table border="0px solid" cellspacing="" cellpadding="" width="1120px"> <tr> <td><img src="../img/01.png"width="100px"></td> <td> <p>姓名:王洋</p> <p>年龄:12</p> <p>性别:女</p> <p>择偶要求:骨灰都给你杨了</p> <p></p><a href="聊天.html"><input type="button" name="" id="" value="找他聊天" /></a></li></th> <p><input type="button" id="" value="打声招呼" onclick="alertTips()"/></p> </td> <td><img src="../img/01.png"width="100px"></td> <td> <p>姓名:王洋</p> <p>年龄:12</p> <p>性别:女</p> <p>择偶要求:骨灰都给你杨了</p> <p></p><a href="聊天.html"><input type="button" name="" id="" value="找他聊天" /></a></li></th> </td> <td><img src="../img/01.png"width="100px"></td> <td> <p>姓名:王洋</p> <p>年龄:12</p> <p>性别:女</p> <p>择偶要求:骨灰都给你杨了</p> <p></p><a href="聊天.html"><input type="button" name="" id="" value="找他聊天" /></a></li></th> </td> <td><img src="../img/01.png"width="100px"></td> <td> <p>姓名:王洋</p> <p>年龄:12</p> <p>性别:女</p> <p>择偶要求:骨灰都给你杨了</p> <p></p><a href="聊天.html"><input type="button" name="" id="" value="找他聊天" /></a></li></th> </td> <td><img src="../img/01.png"width="100px"></td> <td> <p>姓名:王洋</p> <p>年龄:12</p> <p>性别:女</p> <p>择偶要求:骨灰都给你杨了</p> <p></p><a href="聊天.html"><input type="button" name="" id="" value="找他聊天" /></a></li></th> </td> <td><img src="../img/01.png"width="100px"></td> <td> <p>姓名:王洋</p> <p>年龄:12</p> <p>性别:女</p> <p>择偶要求:骨灰都给你杨了</p> <p></p><a href="聊天.html"><input type="button" name="" id="" value="找他聊天" /></a></li></th> </td> </tr> <tr> <td><img src="../img/01.png"width="100px"></td> <td> <p>姓名:王洋</p> <p>年龄:12</p> <p>性别:女</p> <p>择偶要求:骨灰都给你杨了</p> <p></p><a href="聊天.html"><input type="button" name="" id="" value="找他聊天" /></a></li></th> </td> <td><img src="../img/01.png"width="100px"></td> <td> <p>姓名:王洋</p> <p>年龄:12</p> <p>性别:女</p> <p>择偶要求:骨灰都给你杨了</p> <p></p><a href="聊天.html"><input type="button" name="" id="" value="找他聊天" /></a></li></th> </td> <td><img src="../img/01.png"width="100px"></td> <td> <p>姓名:王洋</p> <p>年龄:12</p> <p>性别:女</p> <p>择偶要求:骨灰都给你杨了</p> <p></p><a href="聊天.html"><input type="button" name="" id="" value="找他聊天" /></a></li></th> </td> <td><img src="../img/01.png"width="100px"></td> <td> <p>姓名:王洋</p> <p>年龄:12</p> <p>性别:女</p> <p>择偶要求:骨灰都给你杨了</p> <p></p><a href="聊天.html"><input type="button" name="" id="" value="找他聊天" /></a></li></th> </td> <td><img src="../img/01.png"width="100px"></td> <td> <p>姓名:王洋</p> <p>年龄:12</p> <p>性别:女</p> <p>择偶要求:骨灰都给你杨了</p> <p></p><a href="聊天.html"><input type="button" name="" id="" value="找他聊天" /></a></li></th> </td> <td><img src="../img/01.png"width="100px"></td> <td> <p>姓名:王洋</p> <p>年龄:12</p> <p>性别:女</p> <p>择偶要求:骨灰都给你杨了</p> <p></p><a href="聊天.html"><input type="button" name="" id="" value="找他聊天" /></a></li></th> </td> </tr> </table> </div> <style type="text/css"> .ppp{ /* margin-left: 390px; */ } </style> <script type="text/javascript"> function alertTips(){ alert("成功打招呼"); } </script> <div > <a href="充值会员.html"><img src="../img/2345截图20210824134203.png"/ width="1120px"> </a> </div> <style type="text/css"> .plp{ /* margin-left:390px ; */ } </style> <div > 成功故事 </div> <style type="text/css"> .abc{ /* margin-left: 390px; */ font-size: 50px; } li{ list-style: none; margin-left:30px ; } </style> <div > <table border="0px solid" cellspacing="" cellpadding="" width="1120px"> <tr> <th><a href=""><img src="../img/28.png"/ width="350px"></a> <li>一见钟情</li> </th> <th><a href=""><img src="../img/27.png"/ width="350px"></a> <li>一见钟情</li> </th> <th><a href=""><img src="../img/31.png"/ width="350px"></a> <li>一见钟情</li> </th> <!--<th><a href=""><img src="../img/a31.png"/ width="300px"></a> <li>一见钟情</li> </th>--> </tr> </table> </div> <style type="text/css"> .op{ /* margin-left:400px ; */ } </style> <div > 红娘服务 </div> <style type="text/css"> .abc{ /* margin-left: 390px; */ font-size: 50px; } </style> <div > <img src="../img/2345截图20210825094329.png" width="1120px"/> </div> <style type="text/css"> .pppp{ /* margin-left:390px ; */ } </style>
发表回复