Question

如何在li中使用css忽略填充？

使用jquery可选择跟随css：

.selectable li {margin: 1px;padding: 0.4em;height: 0.52em;line-height: 0.54em;}

是否可以在li内使用上述css生成图像而不受填充影响？这就是我希望图像从li的顶部边框开始，但我希望其他内容仍然填充。

Answer 1

如果您能够在HTML中添加另一个类，那么我认为此解决方案可能对您有用。添加另一个删除填充的类，将li高度设置为与图像相同，并将垂直对齐设置为顶部。

See here

<!-- HTML -->
<ul>
<li>Item One</li>
<li class="cat"><img src="cat.jpg"></li>
<li>Item Three</li>
<li>Item Four</li>
</ul>

* CSS */
li {
  margin: 1px;
  padding: 0.4em;
  height: 0.52em;
  line-height: 0.54em;}

.cat img{
  width:100px; 
  height: 100px;
  vertical-align: top;} 

li.cat {
   height: 100px;
   padding: 0;
   margin: 0;}

Answer 2

添加

position:relative;

到您的li，然后为您的图像声明绝对定位。

position: absolute;
top: 0;
left: 0;

唯一的缺点是你需要声明你的li的最小高度，与图像高度相同或更高。如果他们的尺寸相同，那就没关系了，否则没那么多。

如何在li中获取图像以忽略使用css的填充

2 个答案: