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

水平居中总结-不定宽块状元素方法（三）的答案和运行后的结果是啥

<!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:#ccc;

position:relative;

right:50%;

}

</style>

</head>

<body>

<ul>

</ul>

</div>

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

</div>

</body>

</html>

慕粉1643131359

2016-12-13

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

关注问题我要回答

743

操作

收起

3 回答

chage0527 回答被采纳 +3 积分
2016-12-13

这是你的结果。。。

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

收起回答

慕粉1643131359 提问者

非常感谢！

2016-12-14 回复有任何疑惑可以回复我~

chage0527
2016-12-14

我的结果是这样子的

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

收起回答

chage0527
2016-12-13

<!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{
     border:1px solid #930;
    background:#ccc;
    float:left;
    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>