在HTML中,設置一行圖片有多種方式,下面將分別介紹。
方法一:使用標簽
<img src="圖片鏈接" alt="圖片描述" style="display:inline-block;width:100px;height:100px;" /> <img src="圖片鏈接" alt="圖片描述" style="display:inline-block;width:100px;height:100px;" /> <img src="圖片鏈接" alt="圖片描述" style="display:inline-block;width:100px;height:100px;" />
說明:
- 使用標簽來插入圖片,其中src屬性指定圖片鏈接,alt屬性為圖片描述(可選)
- style屬性中display:inline-block可以讓圖片在一行內顯示,width和height屬性可自定義圖片大小
方法二:使用CSS樣式
<style type="text/css"> .image-row{ white-space:nowrap; font-size:0; } .image-row img{ display:inline-block; width:100px; height:100px; } </style> <div class="image-row"> <img src="圖片鏈接" alt="圖片描述" /> <img src="圖片鏈接" alt="圖片描述" /> <img src="圖片鏈接" alt="圖片描述" /> </div>
說明:
- 使用<style>標簽定義樣式表,在.image-row樣式中設置white-space:nowrap可以讓圖片在一行內顯示,font-size:0可去除行框帶來的空白
- 在.image-row img樣式中設置display:inline-block可以讓圖片在一行內顯示,width和height屬性可自定義圖片大小
- 使用<div>標簽包裹圖片,應用.image-row樣式
上一篇html字體行高設置
下一篇html怎么設置向右寬度