Question

我已经能够在带有渐变的列表中显示图像：

http://stackoverflow.com/questions/23747548/css-list-not-working-if-in-hex/23749271#23749271

我现在需要在图像周围添加边距。我似乎无法找到CSS来做到这一点。

MrWarby

控制列表的default.css文件中的代码:(这是一个大型商务网站）

.SubCategoryList li a,.topNav .CategoryList li a,.homeNav #SideCategoryList li a, .MenuList li a{


/* background: #6daad3; Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url('http://www.clker.com/cliparts/8/a/3/1/1197107206400036309metalmarious_Laptop.svg.med.png') no-repeat ,-moz-linear-gradient(top,  #6daad3 0%, #396b9e 100%); /* FF3.6+ */
background: url('http://www.clker.com/cliparts/8/a/3/1/1197107206400036309metalmarious_Laptop.svg.med.png') no-repeat ,-webkit-gradient(linear, left top, left bottom, color-stop(0%,#6daad3), color-stop(100%,#396b9e)); /* Chrome,Safari4+ */
background: url('http://www.clker.com/cliparts/8/a/3/1/1197107206400036309metalmarious_Laptop.svg.med.png') no-repeat ,-webkit-linear-gradient(top,  #6daad3 0%,#396b9e 100%); /* Chrome10+,Safari5.1+ */
background: url('http://www.clker.com/cliparts/8/a/3/1/1197107206400036309metalmarious_Laptop.svg.med.png') no-repeat ,-o-linear-gradient(top,  #6daad3 0%,#396b9e 100%); /* Opera 11.10+ */
background: url('http://www.clker.com/cliparts/8/a/3/1/1197107206400036309metalmarious_Laptop.svg.med.png') no-repeat ,-ms-linear-gradient(top,  #6daad3 0%,#396b9e 100%); /* IE10+ */
background: url('http://www.clker.com/cliparts/8/a/3/1/1197107206400036309metalmarious_Laptop.svg.med.png') no-repeat ,linear-gradient(to bottom,  #6daad3 0%,#396b9e 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6daad3', endColorstr='#396b9e',GradientType=0 ); /* IE6-8 */


background-size: 80px 80px;



/* background-image:url('http://static.dezeen.com/uploads/2013/03/dezeen_Sergio-concept-car-by-Pininfarina_ss_4.jpg'); */

}

.SubCategoryList li,.topNav .CategoryList li,.homeNav #SideCategoryList li, .MenuList li{
position:relative

}

.SubCategoryList li a:before,.topNav .CategoryList li a:before,.homeNav #SideCategoryList li a:before, .MenuList li a:before {
font-family:'FontAwesome-webfont';
font-weight:normal;
font-style:normal;
content:"\f054";
position:absolute;
top:50%;
right:10px;
z-index:1;
font-size:14px;
color:#ccc;
margin:-8px 10px 0 0

}

现有清单！（https://www.dropbox.com/s/bbu4xkc2h0m26fl/Screen%20Shot%202014-05-20%20at%2014.52.42.png）

要求看！（https://www.dropbox.com/s/9vbr2ap26wbdgfo/Screen%20Shot%202014-05-20%20at%2014.52.27.png）

Answer 1

试试这段代码：

img {
   margin-left: 20px;
}

在列表中的图像周围添加边距

1 个答案: