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

-4

我试图使列表中的所有图像具有相同的大小，并删除放在旁边的子弹。如何使用CSS设置列表中的图像样式

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

来源

2017-08-05 Joshm102

李{列表样式：无; } width：50px;高度：50像素;这在img标签。就是这样。 –

这样的问题很微不足道，如果你刚开始使用CSS，我建议你好好浏览[W3 School CSS]（https://www.w3schools.com/css/default.asp）。 –

我设置的硬编码值的平方，因为我不知道你的实际图片是什么样子。

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>

来源

2017-08-05 03:05:27

我似乎没有做任何改变的图像，甚至没有子弹点。 – Joshm102

@ Joshm102你使用的是WordPress吗？网站是否存在？你可以在这里发布吗？你使用的是什么浏览器？它是什么浏览器版本？您使用什么操作系统？ –

@ Joshm102如果这不适用于您，那么您可能正在加载另一个导致您的更改没有任何效果的样式表...... – jakobhans

我用的!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>

来源

2017-08-05 03:11:32 Ehsan

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

回答

相关问题