为什么网页右边显示出现一大片空白
问题遇到的现象和发生背景
问题相关代码，请勿粘贴截图
<!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 class="na">
<div class="cente" >
<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 class="nav">
<div class="center" >
<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 class="container" style="width: 100%;">
<div class="carousel slide" id="aa">
<!--多张图片-->
<div class="carousel-inner">
<div class="item active">
<img src="../img/123.jpg"/>
<!--标题-->
<div class="carousel-caption">
<h3>王哥喊你谈恋爱</h3>
</div>
</div>
<div class="item">
<img src="../img/12354.jpg"/>
<!--标题-->
<div class="carousel-caption">
<h3>王哥喊你谈恋爱</h3>
</div>
</div>
<div class="item">
<img src="../img/321345.jpg"/>
<!--标题-->
<div class="carousel-caption">
<h3>王哥喊你谈恋爱</h3>
</div>
</div>
<div class="item">
<img src="../img/01 (25).jpg"/>
<!--标题-->
<div class="carousel-caption">
<h3>王哥喊你谈恋爱</h3>
</div>
</div>
<div class="item">
<img src="../img/01 (24).jpg"/>
<!--标题-->
<div class="carousel-caption">
<h3>王哥喊你谈恋爱</h3>
</div>
</div>
<div class="item">
<img src="../img/01 (27).jpg"/>
<!--标题-->
<div class="carousel-caption">
<h3>王哥喊你谈恋爱</h3>
</div>
</div>
</div>
<!--指示图标-->
<ol class="carousel-indicators">
<li data-target="#aa" data-slide-to="0" class="active"></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 class="abc">
王哥姻缘推荐
</div>
<style type="text/css">
.abc{
margin-left: 60px;
font-size: 50px;
}
</style>
<div class="ppp">
<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 class="plp">
<a href="充值会员.html"><img src="../img/2345截图20210824134203.png"/ width="1120px"> </a>
</div>
<style type="text/css">
.plp{
margin-left:390px ;
}
</style>
<div class="abc">
成功故事
</div>
<style type="text/css">
.abc{
margin-left: 390px;
font-size: 50px;
}
li{
list-style: none;
margin-left:30px ;
}
</style>
<div class="op">
<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 class="abc">
红娘服务
</div>
<style type="text/css">
.abc{
margin-left: 390px;
font-size: 50px;
}
</style>
<div class="pppp">
<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 class="na">
<div class="cente" >
<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 class="nav">
<div class="center" >
<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 class="container" style="width: 100%;">
<div class="carousel slide" id="aa">
<!--多张图片-->
<div class="carousel-inner">
<div class="item active">
<img src="../img/123.jpg"/>
<!--标题-->
<div class="carousel-caption">
<h3>王哥喊你谈恋爱</h3>
</div>
</div>
<div class="item">
<img src="../img/12354.jpg"/>
<!--标题-->
<div class="carousel-caption">
<h3>王哥喊你谈恋爱</h3>
</div>
</div>
<div class="item">
<img src="../img/321345.jpg"/>
<!--标题-->
<div class="carousel-caption">
<h3>王哥喊你谈恋爱</h3>
</div>
</div>
<div class="item">
<img src="../img/01 (25).jpg"/>
<!--标题-->
<div class="carousel-caption">
<h3>王哥喊你谈恋爱</h3>
</div>
</div>
<div class="item">
<img src="../img/01 (24).jpg"/>
<!--标题-->
<div class="carousel-caption">
<h3>王哥喊你谈恋爱</h3>
</div>
</div>
<div class="item">
<img src="../img/01 (27).jpg"/>
<!--标题-->
<div class="carousel-caption">
<h3>王哥喊你谈恋爱</h3>
</div>
</div>
</div>
<!--指示图标-->
<ol class="carousel-indicators">
<li data-target="#aa" data-slide-to="0" class="active"></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 class="abc">
王哥姻缘推荐
</div>
<style type="text/css">
.abc{
margin-left: 60px;
font-size: 50px;
}
</style>
<div class="ppp">
<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 class="plp">
<a href="充值会员.html"><img src="../img/2345截图20210824134203.png"/ width="1120px"> </a>
</div>
<style type="text/css">
.plp{
/* margin-left:390px ; */
}
</style>
<div class="abc">
成功故事
</div>
<style type="text/css">
.abc{
/* margin-left: 390px; */
font-size: 50px;
}
li{
list-style: none;
margin-left:30px ;
}
</style>
<div class="op">
<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 class="abc">
红娘服务
</div>
<style type="text/css">
.abc{
/* margin-left: 390px; */
font-size: 50px;
}
</style>
<div class="pppp">
<img src="../img/2345截图20210825094329.png" width="1120px"/>
</div>
<style type="text/css">
.pppp{
/* margin-left:390px ; */
}
</style>
代码太乱了，都运行不出来；先把代码整理一下；