使用浮动左无序列表在一行上对齐div

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了使用浮动左无序列表在一行上对齐div相关的知识，希望对你有一定的参考价值。

The css style's in the tags are important for this snippet to work.
  1. <!DOCTYPE html>
  2. <html lang="en_US">
  3. <head>
  4. 	<meta charset="UTF-8">
  5. 	<title>Aligning divs on one line using a floated left ul</title>
  6. 	<link rel="stylesheet" type="text/css" href="reset.css" media="all">
  7. 	<style type="text/css">
  8. 		ul li{
  9. 			float:left;
  10. 		}
  11.  
  12. 		ul li div{
  13. 			margin-right:15px;
  14. 		}
  15.  
  16. 		ul{
  17. 			list-style:none;
  18. 		}
  19. 		.one, .two{
  20. 			width:200px;
  21. 			height:200px;
  22. 			overflow:hidden;
  23. 			background-color:red;
  24. 			-webkit-border-radius:8px;
  25. 		}
  26.  
  27. 	</style>
  28. </head>
  29. <body>
  30.  
  31.     <div class="container">
  32.     	<ul>
  33.     		<li>
  34.     			<div class="one"></div>
  35.     		</li>
  36.     		<li>
  37.     			<div class="two"></div>
  38.     		</li>
  39.     	</ul>
  40.     </div>
  41. </body>
  42. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript" charset="utf-8"></script>
  43. <script type="text/javascript" src="../js/pngfix.js"></script>
  44. </html>

以上是关于使用浮动左无序列表在一行上对齐div的主要内容，如果未能解决你的问题，请参考以下文章

将左浮动 div 中的图像与右浮动 div 上的文本垂直对齐

CSS CSS：无序列表清晰图像向左浮动

当列表项在 d-flex 中向左浮动时对齐列表中心

ul标签中嵌套div，div会换行显示，如何让ul和div水平显示在同一行

css 怎样让div中的html标签向左浮动，因标签很多不像每个子标签都设左浮动？

如何使无序列表居中？