划分在tableheader中的同一行 | 划分在tableheader中的同一行

本文介绍了划分在tableheader中的同一行的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

以下代码在Internet Explorer中在同一行上显示两个div的诀窍：

 < html& 
< head> 
< meta http-equiv =content-typecontent =text / html; charset = ISO-8859-1> 
< style> 
 th 
 {
 border：0px solid; 
 font：12px / 1.3Lucida Grande，Arial，sans-serifw; 
 font-weight：bold; 
 padding-left：5px; 
 padding-right：5px; 
 background：lightgrey; 
 clear：both; 
 width：70px; 
} 
 .thspan 
 {display：inline; 
 float：left; 
 word-wrap：break-word; 
 margin-right 25px; 
} 
 .bspan 
 {display：inline; 
 float：right; 
 width：auto; 
} 
< / style> 
< / head> 
< body> 
< table> 
< th> 
< div class =bspan>< button id =text2>< / button>< / div> 
< div class =thspan> text1dskjsdkjfsd-sdfdsf< / div> 
< / th> 
< / table> 
< / body> 
< / html>

但现在它不适用于Chrome和Firefox ...任何人都知道为什么？ p>

感谢

解决方案

添加margin-right，删除浮动并将显示更改为块

 .thspan {
 display：block; 
 word-wrap：break-word; 
 margin-right：20px; 
}

The following code does the trick for showing two divs on the same line in Internet Explorer:

<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<style>
    th
    {
      border: 0px solid;
      font :12px/1.3 "Lucida Grande", Arial, sans-serifw;
      font-weight: bold;
      padding-left: 5px;
      padding-right: 5px;
      background :lightgrey;
      clear :both;
      width: 70px;
    }
    .thspan
     { display: inline;
      float :left;
      word-wrap: break-word;
      margin-right 25px;
    }
    .bspan
     { display: inline;
      float: right;
      width: auto;
    }
</style>
</head>
    <body>
        <table>
            <th>
                <div class="bspan"><button  id="text2"></button></div>
                <div class="thspan">text1dskjsdkjfsd-sdfdsf</div>
            </th>
        </table>
    </body>
</html>

But now it doesn't work in Chrome and Firefox... Anyone an idea why?

Thanks

解决方案

Try change the . thspan lie below

Add margin-right, get rid of the float and change display to block

.thspan {
        display: block;
        word-wrap: break-word;
        margin-right: 20px;
}

这篇关于划分在tableheader中的同一行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！