如何使用 CSS 为列表中的图像设置样式答案

【问题标题】：How to style images in a list with CSS如何使用 CSS 为列表中的图像设置样式
【发布时间】：2017-08-05 11:18:04
【问题描述】：

我正在尝试使列表中的所有图像大小相同，并删除放置在它们旁边的项目符号。

这是我正在使用的 HTML：

<ul id = "imageList">
    <li> <img src='../img/Movie1.jpg' alt="Dunkirk"> </li>
    <li> <img src='../img/Movie2.jpg' alt="Kong: Skull Island"> </li>
    <li> <img src='../img/Movie3.jpg' alt="The Big Sick"> </li> 
    <li> <img src='../img/Movie4.jpg' alt="The Lovers"> </li>
    <li> <img src='../img/Movie5.jpg' alt="Everybody Loves Somebody"> </li>
    <li> <img src='../img/Movie6.jpg' alt="Happy End"> </li>
    <li> <img src='../img/Movie7.jpg' alt="Okja"> </li>
    <li> <img src='../img/Movie8.jpg' alt="Cars 3"> </li>
    <li> <img src='../img/Movie9.jpg' alt="Despicable Me 3"> </li>
    <li> <img src='../img/Movie10.jpg' alt="Baby Boss"> </li>
</ul>

【问题讨论】：

li{list-style: none; } 宽度：50px；高度：50 像素；这在 img 标签中。就是这样。
这样的问题很琐碎，如果你刚开始CSS，我建议你去W3 School CSS。

标签： html css image list

【解决方案1】：

我将硬编码值设置为正方形，因为我不知道您的实际图像是什么样的。

ul {
  list-style: none;
}

ul img {
  width: 100px;
  height: 100px;
}

<ul id = "imageList">
    <li> <img src='../img/Movie1.jpg' alt="Dunkirk"> </li>
    <li> <img src='../img/Movie2.jpg' alt="Kong: Skull Island"> </li>
    <li> <img src='../img/Movie3.jpg' alt="The Big Sick"> </li> 
    <li> <img src='../img/Movie4.jpg' alt="The Lovers"> </li>
    <li> <img src='../img/Movie5.jpg' alt="Everybody Loves Somebody"> </li>
    <li> <img src='../img/Movie6.jpg' alt="Happy End"> </li>
    <li> <img src='../img/Movie7.jpg' alt="Okja"> </li>
    <li> <img src='../img/Movie8.jpg' alt="Cars 3"> </li>
    <li> <img src='../img/Movie9.jpg' alt="Despicable Me 3"> </li>
    <li> <img src='../img/Movie10.jpg' alt="Baby Boss"> </li>
</ul>

【讨论】：

我似乎没有做任何改变图像的事情，甚至连项目符号点都没有。
@Joshm102 您在使用 WordPress 吗？网站是活的吗？可以发在这里吗？你使用的是什么浏览器？它是什么浏览器版本？您使用的是什么操作系统？
@Joshm102 如果这对您不起作用，那么您可能正在加载另一个样式表，导致您的更改没有任何效果......

【解决方案2】：

我使用!important 来覆盖其他样式。

#imageList {
    list-style: none !important;;
}

#imageList img {
    width: 50px !important;;
    height: 50px !important;;
}

<ul id = "imageList">
    <li> <img src='http://justcuteanimals.com/wp-content/uploads/2016/10/baby-bear-pictures-cute-animal-pics.jpg' alt="Dunkirk"> </li>
    <li> <img src='http://justcuteanimals.com/wp-content/uploads/2016/10/baby-bear-pictures-cute-animal-pics.jpg' alt="Kong: Skull Island"> </li>
    <li> <img src='http://justcuteanimals.com/wp-content/uploads/2016/10/baby-bear-pictures-cute-animal-pics.jpg' alt="The Big Sick"> </li> 
    <li> <img src='http://justcuteanimals.com/wp-content/uploads/2016/10/baby-bear-pictures-cute-animal-pics.jpg' alt="The Lovers"> </li>
</ul>

【讨论】：