在同一行显示 th 中的 div

发布于 2025-01-01 22:22:23 字数 1040 浏览 0 评论 0原文

在我的 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}

但是按钮显示在以下行上。知道如何解决这个问题吗？

原文

In my html-page I try to display a text and a button next to eachother in a table header:

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

Using the following css code (rendered via stylus):

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

Resulting in the following css-code:

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}

However the button shows on the following line. Any idea how this can be fixed?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

一城柳絮吹成雪 2025-01-08 22:22:23

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

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

CSS：

div.myTestButton
{
    display:inline-block;
}

希望有帮助。

you don't need to wrap button in div as it's unnecessary (unless you have a reason to do that)
The reason why it moves to new line is because you don;t apply styles to it.

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

CSS :

div.myTestButton
{
    display:inline-block;
}

Hope that helps.

回复收藏 0 原文

趁微风不噪 2025-01-08 22:22:23

将按钮的 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>

Give class bspan from button to his div, and set width of that div to auto.

This is whole page

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

回复收藏 0 原文

安静被遗忘 2025-01-08 22:22:23

对 div 和按钮使用 display : inline-table

回复收藏 0 原文

错々过的事 2025-01-08 22:22:23

您可能想查看 float 属性。请查看此处了解详细介绍。

回复收藏 0 原文

决绝 2025-01-08 22:22:23

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

回复收藏 0 原文

爱格式化 2025-01-08 22:22:23

其一，您没有在 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;
}

试试这个，可能效果更好。

For one, you're not using the correct syntax on your 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;
}

Try this, may work better.

回复收藏 0 原文

~没有更多了~