Question

以下代码可以解决在Internet Explorer中同一行显示两个div的问题：

<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>

但现在它无法在Chrome和Firefox中运行......任何人都知道为什么？

由于

Answer 1

尝试更改。 thspan躺在下面

添加margin-right，摆脱浮动并将显示更改为阻止

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

Answer 2

我认为这只是你的'th'不够宽，试试这个：

th{
width: 160px;
}

Answer 3

尝试将display : inline-table用于DIV

Answer 4

这有效

<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: auto;
      display: inline;
    }
    .thspan
     { display: inline;
      word-wrap: break-word;
      margin-right 25px;
    }
    .bspan
     { display: inline;
      width: auto;
    }
    #text2
    {
        display:inline;
    }
</style>
</head>
    <body>
        <table>
            <th>
                <div class="bspan"><button  id="text2"></button></div>
                <div class="thspan">text1dskjsdkjfsd-sdfdsf</div>
            </th>
        </table>
    </body>
</html>

在表标题中的同一行上划分

4 个答案: