避免Firefox中的元素缠绕

div中的跨度下降到下一行，div嵌套在Firefox中的第tr tr内。如何避免这种情况？该代码适用于Chrome和IE。避免Firefox中的元素缠绕

我的HTML

<table> 
    <thead> 
     <tr> 
      <th><div>2016<span >span</span></div></th> 
      <th><div>2017<span class="ui-icon ui-icon-carat-2-n-s"></span></div></th> 
      <th><div>2018<span class="ui-icon ui-icon-carat-2-n-s"></span></div></th> 
     </tr> 
</thead> 
<tbody> 
    <tr> 
     <td>1</td> 
     <td>2</td> 
     <td>3</td> 
    </tr> 
</tbody> 
</table>

我的CSS

table thead tr th { 
    text-align:right; 
    white-space:nowrap; 
} 
table thead tr th div span { 
    display:block; 
    float:right; 
}

在jsFiddle

来源

2015-09-23 agri

本工程为第一跨度，但如果有jQuery用户界面添加了.ui-icon类，其中显示设置为阻止，然后也需要重写以显示：inline-block。不知道是否有更好的方法..我接受答案，因为我没有指定ui-icon类。谢谢。 – agri

删除跨度看到该组。

试试这个。

table thead tr th div { 
    display:block; 
    float:right; 
}

Demo Here

来源

2015-09-23 10:29:14

尝试这样的：Demo

table thead tr th div+span{ 
    display:block; 
    float:right; 
}

欲了解更多信息点击这里Link

来源

2015-09-23 10:29:37

避免Firefox中的元素缠绕

回答

相关问题