我在
有一个包含CSS和HTML的列表问题
现在仔细听。
接受的答案
不接受答案
HTML - 如果jsfiddle不起作用则回退
<ul>
<li class="widget_categories">
<h4>Kategorier</h4>
<ul>
<li>
<a href="#">Belysning & lampor</a>
</li>
<li>
<a href="#">Datorer & tillbehör</a>
<ul class='children'>
<li>
<a href="#">iPad-tillbehör</a>
</li>
<li>
<a href="#">USB-tillbehör</a>
</li>
</ul>
</li>
<li>
<a href="#">Filmkameror</a>
<ul class='children'>
<li>
<a href="#">Spionkameror</a>
</li>
</ul>
</li>
<li>
<a href="#">Hörlurar</a>
</li>
<li>
<a href="#">Kameror & tillbehör</a>
</li>
<li>
<a href="#">Övrigt</a>
</li>
</ul>
</li>
</ul>
CSS - 如果jsfiddle不起作用则回退
* {
margin: 0;
padding: 0;
}
.widget_categories li, .widget_categories li a {
font: normal 11px/18px Arial;
color: #fff;
text-decoration: none;
}
.widget_categories li {
margin-left: 20px;
display: block;
background: #7d7e7d; /* old browsers */
background: -moz-linear-gradient(top, #7d7e7d 0%, #0e0e0e 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7d7e7d), color-stop(100%,#0e0e0e)); /* webkit */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7d7e7d', endColorstr='#0e0e0e',GradientType=0 ); /* ie */
background: -o-linear-gradient(top, #7d7e7d 0%,#0e0e0e 100%); /* opera */
}
.widget_categories li a {
background: #a7cfdf; /* old browsers */
background: -moz-linear-gradient(top, #a7cfdf 0%, #23538a 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a7cfdf), color-stop(100%,#23538a)); /* webkit */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a7cfdf', endColorstr='#23538a',GradientType=0 ); /* ie */
background: -o-linear-gradient(top, #a7cfdf 0%,#23538a 100%); /* opera */
display: inline-block;
padding: 5px;
}
答案 0 :(得分:1)
* { margin: 0; padding: 0; } .widget_categories li, .widget_categories li a { font: normal 11px/18px Arial; color: #fff; text-decoration: none; } .children > li { padding-left: 20px; } .widget_categories li { display: block; background: #a7cfdf; /* old browsers */ background: -moz-linear-gradient(top, #a7cfdf 0%, #23538a 100%); /* firefox */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a7cfdf), color-stop(100%,#23538a)); /* webkit */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a7cfdf', endColorstr='#23538a',GradientType=0 ); /* ie */ background: -o-linear-gradient(top, #a7cfdf 0%,#23538a 100%); /* opera */ } .widget_categories li a { background: #a7cfdf; /* old browsers */ background: -moz-linear-gradient(top, #a7cfdf 0%, #23538a 100%); /* firefox */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a7cfdf), color-stop(100%,#23538a)); /* webkit */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a7cfdf', endColorstr='#23538a',GradientType=0 ); /* ie */ background: -o-linear-gradient(top, #a7cfdf 0%,#23538a 100%); /* opera */ display: inline-block; padding: 5px; width: 100%; }