<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Examples</title><style type="text/css">*{margin: 0;padding: 0;}.box{ padding: 10px 20px; background: red; color: #fff; text-decoration: none; float: left;}.ico{ width: 20px; height: 20px; background: blue; float: right;}</style></head><body><a href="" class="box">怎么破<i class="ico"></i></a> </body></html>
你的父元素，非得用float吗？
a标签
display:block
试试看
a标签
display:block
试试看
加个宽度。
demo here.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Examples</title> <style type="text/css"> *{margin: 0;padding: 0;} .box{ padding: 10px 20px; background: red; color: #fff; text-decoration: none; float: left; width:78px; } .ico{ width: 20px; height: 20px; background: blue; float: right; } .txt{ float:left;} </style></head><body><a href="" class="box"><i class="txt">怎么破</i><i class="ico"></i></a></body></html>
.ico{ width: 20px; height: 20px; background: blue; display:inline-block;}子和父样式中添加position:absolute;同时在子样式中加入right:**px;(宽度自己定义)
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
