首页帮我写一个网页，在body中间放一个class为abc的div，宽度为1000px，这个div内再放五个class为efg的div，这五个div要在同一行，不能用flex，要用float布局，这五个div每个的宽度只有20px，，这五个div中最后那个必须要用last-child来设置跟父级元素边界的距离，并且距离为5px，我现在重点是要保证last-child设置的值必须有效，其他都无所谓。

帮我写一个网页，在body中间放一个class为abc的div，宽度为1000px，这个div内再放五个class为efg的div，这五个div要在同一行，不能用flex，要用float布局，这五个div每个的宽度只有20px，，这五个div中最后那个必须要用last-child来设置跟父级元素边界的距离，并且距离为5px，我现在重点是要保证last-child设置的值必须有效，其他都无所谓。

时间: 2024-02-03 19:02:49 浏览: 182

好的，以下是解决方案： ```html <!DOCTYPE html> <html> <head> <title>Example</title> <style> .abc { width: 1000px; border: 1px solid #ccc; overflow: hidden; } .efg { width: 20px; height: 20px; background-color: #ccc; float: left; margin-right: 0; } .efg:last-child { margin-right: 5px; } </style> </head> <body> <div class="abc"> <div class="efg"></div> <div class="efg"></div> <div class="efg"></div> <div class="efg"></div> <div class="efg"></div> </div> </body> </html> ``` 解释一下： - `width: 1000px`：设置父级元素的宽度为1000px。 - `overflow: hidden`：为了让浮动的子元素不超出父级元素。 - `float: left`：让子元素横向浮动。 - `margin-right: 0`：为了让每个子元素之间没有空隙。 - `.efg:last-child`：选择最后一个子元素，并设置其距离父级元素的右边框为5px。注意事项： - 由于使用了float布局，子元素会脱离文档流，所以需要在父级元素上添加`overflow: hidden`来清除浮动。 - 由于在选择器中使用了:last-child伪类，所以需要保证最后一个子元素是class为efg的div，否则:last-child选择器会失效。

阅读全文