Question

在我的html页面中，我尝试在表格标题中显示文本和彼此旁边的按钮：

<th>
<div class="thspan">text1</div>
<div class="bspan"><button class="buttoncss" id="text2"></button></div>
</th>

使用以下css代码（通过手写笔呈现）：

table th
  border 0px solid
  font 12px/1.3 "Lucida Grande", Arial, sans-serif
  font-weight bold
  padding-left 5px
  padding-right 5px
  background lightgrey
  clear both

.thspan
  display inline
  float left
  word-wrap break-word
  margin-right 25px

.bspan
  display inline
  float right
  width auto

导致以下css代码：

table{border:1px solid;text-align:left}
table th{border:0 solid;font:12px/1.3 "Lucida Grande",Arial,sans-serif;font-weight:bold;padding-left:5px;padding-right:5px;background:#d3d3d3;clear:both}
table tr{border:1px solid;border-color:#000}
table td{white-space:nowrap;border:0 solid;font:12px/1.3 "Lucida Grande",Arial,sans-serifw;padding-left:10px;padding-right:10px}

然而，按钮显示在以下行中。知道如何解决这个问题吗？

Answer 1

你不需要在div中包装按钮，因为它是不必要的（除非你有理由这样做）它移动到新行的原因是因为你没有应用样式。

<th> 
    <div class="thspan">text1</div> 
    <div class="myTestButton"><button class="bspan" id="text2"></button></div> 
</th>

CSS：

div.myTestButton
{
    display:inline-block;
}

希望有所帮助。

Answer 2

您可能想查看float属性。请查看here以获得详细介绍。

Answer 3

首先，你没有在你的CSS上使用正确的语法。

table th {
border: 0px solid;
font: 12px/1.3 "Lucida Grande", Arial, sans-serif;
font-weight: bold;
padding-left: 5px;
padding-right: 5px;
background: lightgrey;
clear: both;
}

.thspan {
display: inline;
float: left;
word-wrap: break-word;
margin-right: 6px;
}

.bspan {
display: inline;
float: right;
width: 5px;
}

试试这个，可能会更好。

Answer 4

将display : inline-table用于div和按钮

Answer 5

将类bspan从按钮提供给他的div，并将该div的宽度设置为auto。

这是整页

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

            </th>
        </table>
    </body>
</html>

Answer 6

这是<th>，显然试图尽可能地缩小。从表中取出两个div，它将按预期工作。或者给桌子和足够的宽度。无需更改CSS或类。

在同一行显示div

6 个答案: