<!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;(宽度自己定义)
HTML怎么学习？HTML怎么入门？HTML在哪学？HTML怎么学才快？不用担心，这里为大家提供了HTML速学教程(入门课程)，有需要的小伙伴保存下载就能学习啦！
广告![ThinkPHP5快速开发企业站点[全程实录]](https://img.php.cn/upload/course/000/000/068/6253d918a3ce7278.png)
收藏
收藏
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
909
