Question

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

这是我正在使用的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>

Answer 1

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

＆＃13;

ul {
  list-style: none;
}

ul img {
  width: 100px;
  height: 100px;
}

＆＃13;

<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>

＆＃13;

Answer 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>

如何使用CSS在列表中设置图像样式

2 个答案: