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

为什么class改为wrap-center就不居中了

<!DOCTYPE HTML>

<html>

<head>

<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-center{

background:red;

}

</style>

</head>

<body>

<ul>

</ul>

</div>

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

</div>

</body>

</html>

qq_潮落潮起海_0

2016-08-11

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

关注问题我要回答

374

操作

收起

1 回答

James20160629
2016-08-11

这一小节介绍的是运用嵌套类选择器的方法来调节元素水平居中。例子中用了.container和.container ul两个类选择器对元素进行调节；而任务是要用.wrap和.wrap-center这两个类选择器来完成对元素的调节；若只是将<body>中的class="container"改为wrap-center，则没能使用.container ul类选择器对元素位置做进一步调节。

完成任务的代码如下。需要仿照已经给的.container和.container ul出来写出.wrap和.wrap-center部分的代码。

<!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:left;
    position:relative;
   left:50%
}
.wrap-center{
    background:#ccc;
    list-style:none;
   margin:0;
   padding:0;
    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>
<br/>

<div class="wrap">
    <div class="wrap-center">123</div>
</div>
</body>
</html>