css3 解决内联元素无法使用rotate()方法的问题（如何让块级元素显示在同一行上）

最新推荐文章于 2023-04-10 17:25:53 发布

水笙沐

最新推荐文章于 2023-04-10 17:25:53 发布

阅读量1.1k

点赞数

文章标签： css3

本文链接：https://blog.csdn.net/mufeng2015/article/details/80079072

版权

文档：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
	<style>
		span{
			display:inline;
			width: 400px;
			height: 200px;
			background-color: lightgrey;
		}
		
		.flex-container {
			display: -webkit-flex;
			display: flex;
			width: 400px;
			height: 250px;
			background-color: lightgrey;
		}

		.flex-item {
			background-color: cornflowerblue;
			width: 100px;
			height: 100px;
			margin: 10px;
			transition: 1s;
		}

		
		.drop_down_li_decoration_down{
			transform:rotate(90deg);
			-ms-transform:rotate(90deg); /* IE 9 */
			-webkit-transform:rotate(90deg); /* Safari and Chrome */
			transition: transform 1s;
		}
	</style>
</head>
 
<body>

	<span>
		<a style="background-color: #000; color:#FFA500">行内链接</a>
		<a style="background-color: #000; color:#FFA500; 
				  padding:0 5px;  text-decoration:none;" 
		   href="javascript:void(0);" 
		   οnclick=" $(this).addClass('drop_down_li_decoration_down');"
		   >
			↻
		</a>
		<div class="flex-container" >
			<div class="flex-item"  
				 οnclick=" $(this).addClass('drop_down_li_decoration_down');">flex item 1</div>
			<div class="flex-item"  
				 οnclick=" $(this).addClass('drop_down_li_decoration_down');">flex item 2</div>
			<div class="flex-item" 
				 οnclick=" $(this).addClass('drop_down_li_decoration_down');">flex item 3</div>  
		</div>
	</span>
	

</body>
</html>

问题：

方案：

父级元素使用 display：flex ；

修改后的文档：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
<script> 

	
</script> 
	
	<style>
		span{
			display:inline;
			width: 500px;
			height: 200px;
			background-color: lightgrey;
		}
		
		.flex-container {
			display: -webkit-flex;
			display: flex;
			width: 350px;
			height:150px;
			background-color: lightgrey;
		}

		.flex-item {
			background-color: cornflowerblue;
			width: 100px;
			height: 100px;
			margin: 10px;
			transition: 1s;
		}

		
		.drop_down_li_decoration_down{
			transform:rotate(90deg);
			-ms-transform:rotate(90deg); /* IE 9 */
			-webkit-transform:rotate(90deg); /* Safari and Chrome */
			transition: transform 1s;
		}
	</style>
</head>
 
<body>
	<span style="display: flex;" >
		<a style="background-color: #000; color:#FFA500; 
				  padding:0 20px; margin-bottom:178px;">行内链接</a>
		<a style="background-color: #000; color:#FFA500; margin-left:3px;
				  padding:0 5px;  text-decoration:none; margin-bottom:178px;" 
		   href="javascript:void(0);" 
		   οnclick=" $(this).addClass('drop_down_li_decoration_down');"
		   >
			↻
		</a>
		<div class="flex-container" >
			<div class="flex-item"  
				 οnclick=" $(this).addClass('drop_down_li_decoration_down');">flex item 1</div>
			<div class="flex-item"  
				 οnclick=" $(this).addClass('drop_down_li_decoration_down');">flex item 2</div>
			<div class="flex-item" 
				 οnclick=" $(this).addClass('drop_down_li_decoration_down');">flex item 3</div>  
		</div>
	</span>
	
</body>
</html>