HTML的DIV,问题出现在哪，什么解决？

答案:1 悬赏:30 手机版

解决时间 2021-08-23 21:42

提问者网友：杀生予夺
2021-08-23 09:40

html：

<div id="MainBody">
        <div id="top">
        <div id="img">
                <ul>
                    <li><a href="#"><img src="image/img1.PNG" width="163" height="124" alt="Red vision" class="a"/></a></li>
                    <li><a href="#">点击看大图</a></li>
                </ul>
            </div>
        <div id="leaflet">
            <ul>
                    <li>风格名称：Red vision</li>

                    <li>设计作者：郑木头</li>

                    <li>CSS制作：番茄红了</li>

                    <li>制作时间：2005/11/04</li>

<li>演示地址：<a href="#"> http://www.tblog.com.cn </a></li>

                    <li>风格简介：此风格设计来自网友"郑木头"，由PJBLOG团队<br/>(番茄红了、舜子)共同完成，在此感谢"郑木头"<br/>提供的设计风格 </li>
                    <li style="text-align:right"><a href="#"><img src="image/download.PNG" class="a" /> 点击下载该风格</li>
            </ul>
            </div>
        </div>
        <hr id="hr"/>
        <div id="top">
          <div id="img">
            <ul>
                <li><a href="#"><img src="image/img2.PNG" width="163" height="124" alt="Dawn(黎明)" class="a"/></a></li>

                <li><a href="#">点击看大图</a></li>
            </ul>
    </div>
<div id="leaflet">
    <ul>
        <li>风格名称：Dawn(黎明)</li>

        <li>设计作者：番茄红了</li>

        <li>CSS制作：番茄红了</li>

        <li>制作时间：2005/09/19</li>

<li>演示地址：<a href="#"> http://www.tblog.com.cn </a></li>

        <li>风格简介：本SKIN适用于PJBLOG2 V2.3版本。本SKIN经测试完全兼容IE、Mozilla Firefox浏览器。建议在1024*768下浏览。</li>
        <li style="text-align:right"><a href="#"><img src="image/download.PNG" class="a" /> 点击下载该风格</li>
    </ul>
</div>
        </div>
      </div>

css：

@charset "gb2312";

body{
font-size:12px;
text-align:center;
font-family:Tahoma;
margin:0px;
}

a:link,a:visited {
border:0px;
font-size:12px;
color: #000;
text-decoration:none
}

#MainBody{
width:535px;
text-align:left;
float:right;
clear:right;
overflow:hidden;
margin-top:20px;
}
.a{
border:0px;
}
#hr{
border: 1px dashed #ccc;
width: 100%;
height: 1px;
clear:both;
}
#img{
width:162px;
text-align:left;
float:left;
clear:left;
overflow:hidden;
height:150px;
margin-bottom:10px;
border:1px solid #123;
}
#leaflet{
width:370px;
text-align:left;
float:right;
clear:right;
overflow:hidden;
height:150px;
border:1px solid #123;
}
#img ul{
list-style:none;
margin:0px;
padding:0px;
text-align:center;

}
#leaflet ul{
list-style:none; margin:0px;
}
#top{
margin-top:20px;
margin-bottom:20px;}

最佳答案

五星知识达人网友：鸠书
2021-08-23 10:10

你指的问题是不是页面不能居中跑右边去了？如是的话把这段“#MainBody{
width:535px;
text-align:left;
float:right;
clear:right;
overflow:hidden;
margin-top:20px;
}”

代码换成

“#MainBody{
width:535px;
text-align:left;
overflow:hidden;
margin:20px auto;
}”即可

我要举报

如以上回答内容为低俗、色情、不良、暴力、侵权、涉及违法等信息，可以点下面链接进行举报！

点此我要举报以上问答信息