A: div pictures come out
<style> /* 图片在一行 */ #div1 li{ float: left; list-style: none; } </style> </head> <body> <div id="div1"> <ul> <li><img src="pic/美女1.jpg" alt=""></li> <li><= "PIC / beauty 2.jpg"the srcIMG alt=""></li> <li><img src="pic/美女3.jpg" alt=""></li> <li><img src="pic/美女4.jpg" alt=""></li> <li><img src="pic/美女5.jpg" alt=""></li> <li><img src="pic/美女6.jpg" alt=""></li> <li><img src="pic/美女7.jpg" alt=""></li> </ul> </div> </body> </html>
Pictures of width and height is 200px, then add borders to div
<style> #div1 { border: 1px solid red; width: 1402px; height: 202px; } /* 图片在一行 */ #div1 li{ float: left; list-style: none; } </style> </head> <body> <div id="div1"> <ul> <li><img src="pic/美女1.jpg" alt=""></li> <li><img src="pic/美女2.jpg" alt=""></li> <li><img src="pic/美女3.jpg" alt=""></li> <li><img src="pic/美女4.jpg" alt=""></li> <li><img src="pic/美女5.jpg" alt=""></li> <li><img src="pic/美女6.jpg" alt=""></li> <li><img src="pic/美女7.jpg" alt=""></li> </ul> </div> </body> </html>
Ul attempt to add the margin property
< Style > # DIV1 { border : 1px Solid Red ; width : 1402px ; height : 202px ; } / * image in line * / # DIV1 Li { a float : left ; List-style : none ; } # DIV1 UL { margin-left : 0px ; # solves the above, remain unresolved left margin-top : 0px ; } </ style> </head> <body> <div id="div1"> <ul> <li><img src="pic/美女1.jpg" alt=""></li> <li><img src="pic/美女2.jpg" alt=""></li> <li><img src="pic/美女3.jpg" alt=""></li> <li><img src="pic/美女4.jpg" alt=""></li> <li><img src="pic/美女5.jpg" alt=""></li> <li><img src="pic/美女6.jpg" alt=""></li> <li><img src="pic/美女7.jpg" alt=""></li> </ul> </div> </body> </html>
The reason: pading reasons, have left from the last photo squeeze anymore
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>div中图片问题</title> <style> #div1 { border: 1px solid red; width : 1400px ; height : 200px ; } / * image in line * / # DIV1 Li { a float : left ; List-style : none ; } # DIV1 ul { / * between the margin and ul is the parent or sibling module distance * / margin : 0 ; / * when div set width, float the upper label to, set the width, in order to make the picture a row, * / width : 1400px ; # after setting the padding = 0, you can not set the width height : 200px ; / * This thing leads to the left has been vacant padding is the distance ul contents inside the ul border * / padding : 0 ; # ul inside filled content, that is, from the outer border of the li, li from ul default is not 0, Therefore, to adjust themselves } </ style > </ head > < body > < div ID = "DIV1" > < UL > < Li > < IMG the src = "PIC / beauty 1.jpg" Alt = "" > </ Li > < Li > < IMG the src = "PIC / beauty 2.jpg" Alt = ""></li> <li><img src="pic/美女3.jpg" alt=""></li> <li><img src="pic/美女4.jpg" alt=""></li> <li><img src="pic/美女5.jpg" alt=""></li> <li><img src="pic/美女6.jpg" alt=""></li> <li><img src="pic/美女7.jpg" alt=""></li> </ul> </div> </body> </html>
# EVERYTHING