關於margin-right使用不了的問題

菜就要多學發表於2020-10-12

先上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.

完成效果如圖
在這裡插入圖片描述

相關文章