                        课程
                    
                        /前端开发
                        
                            /HTML/CSS
                        
                        /初识HTML(5)+CSS(3)-升级版

求大神解疑，下面我的编程哪里出错了？为什么<a>标签内容与<div>内容重合了呢？

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>不定宽块状元素水平居中</title>
<style>
.container{
float:left;
position:relative;
left:50%
}

.container ul{
list-style:none;
margin:0;
padding:0;
position:relative;
left:-50%;
}
.container li{float:left;display:inline;margin-right:8px;}

/*下面是代码任务区*/
.wrap{float:right;
      position:relative;
      right:50%;
}
.wrap-center{
    background:#ccc;
    position:relative;
    right:-50%;

}
</style>
</head>

<body>
<div class="container">
<ul>
    <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
    </ul>
</div>

<div class="wrap">
    <div class="wrap-center">我们来学习一下这种方法。</div>
</div>
</body>
</html>

一壶时光

2018-05-31

源自：初识HTML(5)+CSS(3)-升级版 15-7

关注问题我要回答

1045

操作

收起

3 回答

慕田峪4419701
2018-05-31

你的代码没的问题，代码运行的结果就是这样子的。如果你把代码里所有的left：50%，以及left:-50%去掉就可以看出来，.container 和 .wrap是一左一右靠body的左边排列的。那么现在设置了left ，因为他们在同一行，都挪到了body的中间区域，所以会互相覆盖。

要解决这个问题就要让这两个元素不在同一行。可以在 .wrap 的css里加一句:

clear:both;

就可以让 wrap的元素左右两边都不出现float元素。这样就可以了

2 回复有任何疑惑可以回复我~

收起回答

一壶时光提问者

谢谢?

2018-05-31 回复有任何疑惑可以回复我~

给力哥
2018-05-31

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>不定宽块状元素水平居中</title>
<style>
.container{    
float:left;	
position:relative;	
left:50%
}
.container ul{	
list-style:none;	
margin:0;	
padding:0;		
position:relative;	
left:-50%;
}
.container li{
float:left;
display:inline;
margin-right:8px;
}
/*下面是代码任务区*/
.wrap{    
clear:both;    
/*float:left;*/    
position:relative;    
left:50%;
}
.wrap-center{    
background:#ccc;    
position:relative;    
left:-50%;
}
</style>
</head>
<body>
<div class="container">	
<ul>    	
<li><a href="#">1</a></li>        
<li><a href="#">2</a></li>        
<li><a href="#">3</a></li>    
</ul>
</div>
<!--下面是代码任务区-->
<div class="wrap">    
<div class="wrap-center">我们来学习一下这种方法。</div>
</div>
</body>
</html>

1 回复有任何疑惑可以回复我~

收起回答

给力哥
2018-05-31

<!DOCTYPE HTML><html><head><meta charset="utf-8"><title>不定宽块状元素水平居中</title><style>.container{    float:left;	position:relative;	left:50%}.container ul{	list-style:none;	margin:0;	padding:0;		position:relative;	left:-50%;}.container li{float:left;display:inline;margin-right:8px;}/*下面是代码任务区*/.wrap{    clear:both;    /*float:left;*/    position:relative;    left:50%;}.wrap-center{    background:#ccc;    position:relative;    left:-50%;}</style></head><body><div class="container">	<ul>    	<li><a href="#">1</a></li>        <li><a href="#">2</a></li>        <li><a href="#">3</a></li>    </ul></div><!--下面是代码任务区--><div class="wrap">    <div class="wrap-center">我们来学习一下这种方法。</div></div></body></html>

0 回复有任何疑惑可以回复我~

收起回答