首页 > web前端 > css教程 > 正文

如何解决css中float:right右对齐元素会换行不在同一条线上

不言
发布: 2018-06-21 17:35:23
原创
3094 人浏览过

这篇文章主要介绍了关于如何解决css中float:right右对齐元素会换行不在同一条线上,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下

使用float设置右对齐显示的时候,我们通常会遇到,右对齐的元素会换行,这样就会出现左右元素不在同一条线上,下面为大家介绍下两种解决方法,有类似情况的朋友可以参考下

CSS中通常我们需要将某元素居左、居右显示,这个时候我们就可以根据float来设置,在设置右对齐显示的时候,我们通常会遇到,右对齐的元素会换行,这样就会出现左右元素不在同一条线上,我们可以通过以下方式来解决这个问题: 

第一种解决办法:把左右对换,比如把日期放在标题的前面,对调一下就好了。 

第二种解决办法:给左边也加上float:left。 

CSS float定义和用法 

float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像,使文本围绕在图像周围,不过在 CSS 中,任何元素都可以浮动。浮动元素会生成一个块级框,而不论它本身是何种元素。 

如果浮动非替换元素,则要指定一个明确的宽度;否则,它们会尽可能地窄. 

Float常跟属性值left、right、none
Float:none 不使用浮动
Float:left 靠左浮动
Float:right 靠右浮动

以上就是本文的全部内容,希望对大家的学习有所帮助,更多相关内容请关注PHP中文网!

相关推荐:

如何使用css属性nth-child(n)匹配选择第n个子元素

如何解决火狐在用offsetHeight获取div的高度时为0

以上是如何解决css中float:right右对齐元素会换行不在同一条线上的详细内容。更多信息请关注PHP中文网其他相关文章!

相关标签:
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网:公益在线PHP培训,帮助PHP学习者快速成长!