划分在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中的同一行的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

08-06 09:27