代碼顯示問題
<!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{
? ? background:#ccc;
? ? text-align:center;
? ? ?width:200px;/*定寬*/
? ? margin:20px auto;
? ??
}
</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>
為社么會重疊在一起呢？
2022-03-24
不錯不錯，加油哦~~~有可能。瀏覽器的渲染效率還是差一些，所以對于非常細節的效果處理還是會比其他圖形環境，比如OpenGL,DirectX差一些。
2018-08-15
因為.container ul{
list-style:none;
margin:0;
padding:0;
position:relative;
left:-50%;
}
?中的 margin:0;padding:0; 有“消除文本與div邊框之間的間隙”（在不定寬塊狀元素方法二有提到過）的作用，所以現在container ul元素是和其他元素沒有隔閡的固然可以重疊，你可以試試把 margin:0;padding:0;給刪掉，它們就不會重疊了，但不會在同一行了
2018-07-29
展開看全屏就好啦