0
大家好我有一个有序列表,随着屏幕越来越宽,越来越缩进。列表项的每一层比前一个更加缩进。无序列表项目缩进
任何人都可以帮忙。下面是我的代码
<div id="left-content">
<div id="product-header">
<h1 class="red-text">Gmail</h1>
<h2>A google approach to email</h2>
</div>
<p>Gmail is built on the idea that email can be more intuitive, efficient, and useful. And maybe even fun. After all, Gmail has:</p>
<ol class="features">
<li>
<img src="../IMAGES/google-storage.png" alt="google-storage">
<p class="features-header">Lots of space</p>
<p>Over 10275.525924 megabytes (and counting) of free storage.</p>
</li>
<li>
<img src="../IMAGES/google-cancel.png" alt="google-cancel">
<p class="features-header">Less spam</p>
<p>Keep unwanted messages out of your inbox.</p>
</li>
<li>
<img src="../IMAGES/google-mobile.gif" alt="google-mobile">
<p class="features-header">Mobile access</p>
<p>Get Gmail on your mobile phone.<a href="#">Learn more</a></p>
</li>
</ol>
</div><!-- "left-content -->
#product-header{
margin-bottom: 1.225em;
}
#main-content{
padding: 2em;
width: 80%;
margin: 0 auto;
}
#left-content{
width: 45%;
min-width: 18.75em;
}
#left-content p{
font-size: .8125em;
}
.red-text{
color: red;
}
.features li{
margin: 0.625em 2.5em 1.25em 0;
}
.features img{
float: left;
margin: 0 1em 1em 0;
}
.features-header{
font-size: : .875em;
margin-bottom: .3em;
}
我已经缩小到#left-content p的字体大小。
感谢任何人都可以提供帮助。
什么是对这些元素的CSS?是否有一个'margin-left'或'padding-left'隐藏在某个地方,它们的值在* percents *中定义? – amon 2012-08-04 22:06:48
这些保留在以每个列表项目为目标的要素类上的特征。特征li {0} {0} {0} {0} {margin}:0.625em 2.5em 1.25em 0; } – 2012-08-04 22:07:55
我通过修复边距来修复它。感谢在正确的方向阿蒙点 – 2012-08-04 22:10:25