html && css 解決li浮動邊框為2的問題

思路

問題：首先，li 浮動后，添加邊框，則 中間 li 的邊框會形成 1+1=2 的效果，1px的邊框會變成2px。(例：分頁模塊)原因 => 就是浮動后的 li 會使粘著在一起，所以就出現 1+1=2解決方法:1. 設置 li => margin-left: -1px; 利用重疊，達到1px的效果。如果需要:hover ，則在 :hover里面加上 position: relative;就可以了。因為相對定位比標準流高一級，浮在上面。這樣就可以達到顯示被壓住的邊框了。2. 如果父元素本來就有 相對定位了，那么我們就可以使用 z-index:1 讓他顯示出來。*注意：方法可能不止以上2種，如有其他方法可聯系小棕熊QVQ，讓小棕熊與你一起學習更多的方法。

問題圖

---

方法1 html代碼

                html && css 解決浮動坍塌問題方法        * {            padding: 0;            margin: 0;        }.clearfix::after {        content: '';        display: block;        height: 0;        visibility: hidden;        clear: both;}        .container  {            width: 300px;            margin: 50px auto;            text-align: center;        }        .container li {            float: left;            padding: 5px 10px;            margin-left: -1px;  /* 解決方法 */            list-style: none;            border: 1px solid #00f;            box-sizing: border-box;        }        

1 2 3 4 5 6 7 8 9

:hover 效果上

                html && css 解決浮動坍塌問題方法        * {            padding: 0;            margin: 0;        }.clearfix::after {        content: '';        display: block;        height: 0;        visibility: hidden;        clear: both;}        .container  {            width: 300px;            margin: 50px auto;            text-align: center;        }        .container li {            float: left;            padding: 5px 10px;            list-style: none;            margin-left: -1px;            border: 1px solid #00f;            box-sizing: border-box;        }        .container li:hover {            position: relative;            border: 1px solid #0ff;        }        

1 2 3 4 5 6 7 8 9

加了 position: relative 和沒有添加 position: relative 的對比圖

---

方法3 ?z-index:1

                html && css 解決浮動坍塌問題方法        * {            padding: 0;            margin: 0;        }.clearfix::after {        content: '';        display: block;        height: 0;        visibility: hidden;        clear: both;}        .container  {            width: 300px;            margin: 50px auto;            text-align: center;        }        .container li {            position: relative;            float: left;            padding: 5px 10px;            list-style: none;            margin-left: -1px;            border: 1px solid #00f;            box-sizing: border-box;        }        .container li:hover {            z-index: 1;             border: 1px solid #0ff;        }        

1 2 3 4 5 6 7 8 9

效果圖

總結

以上是生活随笔為你收集整理的ireport如何给static text加边框_html amp;amp; css 解决li浮动边框为2的问题的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。