关于margin-right使用不了的问题

最新推荐文章于 2024-01-19 15:27:43 发布

成宝拉.

最新推荐文章于 2024-01-19 15:27:43 发布

阅读量1.1k

点赞数

文章标签： css css3

本文链接：https://blog.csdn.net/awawaw154/article/details/109038310

版权

先上html结构

	<body>
		<ul>
		   <li>
			  <input type="checkbox" class="ol-check" name="" id="" value="" />
			  <h4>你好呀</h4>
			  <a href="#" style="margin-right: 0;">删除</a>
		  </li>
		</ul>
	</body>

再上css

			ul{margin: 50px auto;width: 300px;}
			h4{display: inline;}
			ul li{width: 300px;height: 50px;background-color: red;padding-right: 0;border: 1px #1B6D85 solid;
			list-style-type: none;line-height: 50px;}
			ul li a {}

在这里插入图片描述
我们想排版的时候想让这个删除链接在最右边但与最右边有一点小间隙该怎么处理呢？这个时候都会想到的就是margin-right：5px这种，但用不了
为什么呢？
因为浏览器在渲染页面的时候是从左向右渲染的，在没有超出父容器的宽度的前提下如果子容器的宽度能够被容纳设置margin-right是没有用的

解决方法来了！！
给父容器(这里的li)设一个相对定位，再给a链接设一个绝对定位再通过right：5px，就能解决，如果只要求贴最右边，也可以使用float：right.

完成效果如图
在这里插入图片描述

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

成宝拉.

关注关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
关于margin-right使用不了的问题

先上html结构 <body> <ul> <li> <input type="checkbox" class="ol-check" name="" id="" value="" /> <h4>你好呀</h4> <a href="#" style="margin-right: 0;">删除</a> </li> </ul> </
复制链接

扫一扫