[HTML][CSS]解决CSS中float:right后右对齐换行问题

最新推荐文章于 2023-11-23 16:04:55 发布

原创最新推荐文章于 2023-11-23 16:04:55 发布 · 6.9k 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

网页专区专栏收录该内容

41 篇文章

订阅专栏

本文介绍了解决CSS中使用float:right属性导致元素在Internet Explorer浏览器中另起一行显示的问题。通过添加float:left的标签使其在不同浏览器中都能保持在同一行显示。

解决CSS中float:right后右对齐换行问题

问题:

在IE下就会出现，加了float:right后的标签另起一行了。但在Chrome、Firefox下这个问题没有出现。

解决办法：

在另一个标签中添加float：left，那么就在同一行了。

<div>
    <span style="float:left" id="ORGNAME"></span>
    <a style='float:right' href="#" onclick="onOrgSelectClick()">部门选择</a>
</div>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

逐浪_一生悬命

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

css给span加float:right右浮动后内容换行下移

09-25

在div css布局中当span标签右浮动时会产生换行狭义的现象，于是网上搜集整理一下，晒出来和大家分享，希望可以帮助你们

参与评论您还未登录，请先登录后发表或查看评论

CSS中float:right后右对齐换行问题

01-10

619

CSS中float时浮动元素，浮动元素的定位还是基于正常的文档流，然后从文档流中抽出并尽可能远的移动至左侧或者右侧，这里和大家分享一下解决CSS中float:right属性后右对齐换行问题方法。解决CSS中float:right属性后右对齐换行问题 ◆问题在Chrome、Firefox下这个问题没有出现，但是在IE下就会出现，日期另起一行了。 ◆原因分析当非float的元...

元素 float:right 后右对齐换行原因

碧波海天

06-08

688

<br />当非float的元素和float的元素在一起的时候，如果非float元素在先，那么float的元素将被排斥 <br /> 也就是说，你的span是float:right，但是你文本还是float:none<br />如果要让两者占据同一行:要么你把span先于文本显示：<span style="float: right">2007-08-18</span> （示例第3行）要么把文本也设成float：<span style="float: left"> 新闻新闻新闻</spa

Firefox下使用float:right换行问题

qingyuexiao的专栏

05-24

640

今天遇到一个很奇怪的问题，使用float:right时，在Firefox中显示到了下一行（不是内容过长），而在Chrome和IE（10、11）中都是正常的。代码类似如下： <div> <span>logo</span> <span>name</span> <div style="displa...

Firefox错误的换行Bug（white-space:nowrap遇到float:right）

chongci8705的博客

10-12

616

Firefox浏览器在处理white-space为nowrap下的元素float为right时，会错误的换行与Chrome处理不一致。 <!DOCTYPE html> <html lang="en"> <head> <meta charse...

解决float属性导致换行

码小二的博客

09-06

8855

在h5开发中，经常会使用float属性来解决一些布局问题。但在某些复杂的布局中也会遇到使用float属性是导致一行中的元素无法对齐或者float元素换行等现象。在遇到这种问题时，我们可以修改元素的位置来解决换行或者元素不对齐的现象。

为什么css中float:right右对齐会换行

学习也休闲

10-18

2499

文章转载于：为什么css中float:right后右对齐换行 http://www.studyofnet.com/news/7.html CSS中通常我们需要将某元素居左、居右显示，这个时候我们就可以根据float来设置，在设置右对齐显示的时候，我们通常会遇到，右对齐的元素会换行，这样就会出现左右元素不在同一条线上，我们可以通过以下方式来解决这个问题：

使用float:right后内容下移换行的原因及解决方案

热门推荐

某年某月某条街

11-16

1万+

问题：如下图所示，使用float:right;之后，右边的内容换行了，代码如下：<style> .fl{width:100%;text-align:center;} .fll{width:30%;background-color:#ff0;} .flr{width:70%;background-color:#f00;float:right;} </style> <div class="fl">

javascript当中float:left，clear:left，float:right和clear:right用法

mark_to_win的专栏

03-20

1253

2.float:left，clear:left，float:right和clear:right用法例 1.2<head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <style type="text/css"> #first{...

元素float:right 后右对齐换行的原因及其解决

iteye_19776的博客

08-14

505

今天遇到一个html的问题 [code="haml"] .tag.tag_success.tag_x %span tag.display_name %a(href="javascript:void(0)" style= "float:right;") [/code] 给a元素添加float: right 它会脱离队伍，跳到下一行。 ...

关于float的自动换行问题

cyc_42的博客

07-13

1万+

首先设置的几个float属性遇到超过父容器的情况下会自动换行 test .box { width: 100px; height: 700px; margin: 0 auto; border: 1px solid red; } .s-left{ width: 60px; height: 100px;

浮动出现问题解决方法

加油~么么哒~~

02-21

5030

1.float: right 右浮动时，靠右换行（错行）的解决方法当非float的元素和float的元素在一起的时候，如果非float元素在先，那么float的元素将被排斥。把右浮动的标签放在正常标签的前面即可。 {forum}{subject}{date1} {date1}{forum}{subject} 2.浮动如何换行例子如：两个div设置了左浮动，

IE6/7下float: right 换行的BUG修改

MRblackLu的博客

02-07

579

float:right; 在IE6/7下折行显示

IE7 下float left right 混用会导致元素换行的问题

weixin_30407613的博客

01-04

185

众所周知的IE7是个前端的坑，这次又遇到了一个和float相关的，比较偏门的问题。简单的说，就是一行内需要一个float:left的元素和一个float:right的元素，中间写上没有被任何html标志包裹的文本。效果如下（IE8-10, Chrome, FireFox）：然后在IE7下，则很不客气的变成这这幅模样：其实，这是因为文字上没有float属性而把right挤下去...

CSS技巧学习总结

bcbobo21cn的专栏

02-08

417

div自身居中使用margin:0 auto 上下为0，左右自适应的css样式。要让div水平居中，那么除了设置css margin:0 auto外，还不能再设置float，不然将会导致div靠左（设置float:left）和div靠右（设置float:right）。 ======== div内的内容居中内容居中分为div内容水平居中与div内容垂直居中。 div内容居中，只需要...

CSS中右对齐float:right换行的解决方法

weixin_34018202的博客

03-16

247

应用FLOAT左右的时候，经常出现不在一行的现象。下面给出几种常用的解决方法：第一种解决办法：把左右对换，比如吧日期放在标题的前面，我朋友就是那个问题，对调以下就好了。第二种解决办法：给右边也加上FLOAT:RIGHT 浮动不正常的（不在同一行，换行了，仅仅因为多了一个＆ｎｂｓｐ;，从而导致整个排版混乱）：浮动正常的1：（第一种解决办法：去掉＆ｎ...

html float换行了,html5中float属性造成的换行如何处理

weixin_39611070的博客

06-08

739

在h5开发中，经常会使用float属性来解决一些布局问题。但在某些复杂的布局中也会遇到使用float属性是导致一行中的元素无法对齐或者float元素换行等现象。在遇到这种问题时，我们可以修改元素的位置来解决换行或者元素不对齐的现象。修改收货地址比如说，我在编写类似菜单的布局时，“修改地址”一栏就出现了这种现象，当我把想要向右浮动的元素(向右的箭头)在代码中调整到第一个元素位置是就解决了float换...

使用 css 实现文字单行居右, 换行居左展示

阿臻

11-23

1028

原理是，如果子盒子没有换行，那么子盒子的长度就是内容的长度，它根本没有空间将字体移动居左，父盒子的居左样式就会生效，子盒子就会居左展示。当子盒子里面的文字换行了，那么子盒子的长度也被撑大了，这时候子盒子的居左就会生效了, 因为第一行是满的所以就算居左也和居右没有什么两样。给外层盒子设置居右展示, 子盒子设置居左。

ie下li标签中span加float:right不换行问题解决方案

田俊涛的专栏

01-19

5573

在IE6,IE7下使用标签时,在加入右浮动样式（float:right）后,会换行的bug解决方案: bug案例:新闻列表中,为使时间右对齐,加右浮动产生换行 href=“#”>BEST SUSHI MENU 2012-12-24 href=“#”>BEST SUSHI MENU 2012-12-24 href=“#”>BEST SUSHI MENU 2012-12-24 href=“#”>