多行列表右边距为零的实现方法
生活随笔
收集整理的這篇文章主要介紹了
多行列表右边距为零的实现方法
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
工作當(dāng)中我們經(jīng)常遇到這樣的需求，多個圖片或者其他元素按順序從左至右排列，左右兩側(cè)的元素的外邊距都是零。示例如下：
這種布局相信大家都經(jīng)常遇到，當(dāng)然用css3選擇器的話不難實現(xiàn)，但是我們不得不面對兼容問題。也可以手動來給右側(cè)的元素加上一個class名稱，然后讓這個class的margin-right:0。那么，問題是，如果這些數(shù)據(jù)都是從后臺動態(tài)取出來的，這樣的話，數(shù)據(jù)就不固定了，也無法手動去添加class名稱。如果用JS的話就好實現(xiàn)了，但是用JS的話肯定會對頁面的性能有一定的影響。那么我們改怎么實現(xiàn)這個效果呢？答案就是使用margin:負(fù)值.代碼如下：
<!doctype html> <html> <head> <meta charset="utf-8"> <title>margin 問題</title> <style> *{margin: 0;padding: 0;list-style:none;} #wrap{width: 320px;height: auto;overflow:hidden;margin: 100px auto;background: blue;border: black 5px solid; } #wrap ul{background: green;overflow:hidden;height: auto;margin: 0 -10px -10px 0; } #wrap ul li{float: left;width: 100px;height: 100px;line-height:100px;text-align:center;background: red;margin: 0 10px 10px 0;color: #fff; } </style> </head> <body> <div id="wrap"> <ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li> </ul> </div> </body> </html>?
轉(zhuǎn)載于:https://www.cnblogs.com/codinganytime/p/5207576.html
總結(jié)
以上是生活随笔為你收集整理的多行列表右边距为零的实现方法的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： spring事件通知机制详解
- 下一篇： The RAII Programming