Question

我目前正在尝试强制<th>内的所有元素位于同一行，并且遇到问题。我查看了很多帖子，常见的css答案似乎是在style="white-space:nowrap"元素上使用<th>。

<thead>的代码如下：

              <thead>
                <tr>
                  <th><h5>Some</h5></th>
                  <th><h5>Thing</h5></th>
                  <th><h5>Another</h5></th>
                  <th><h5>Thing2</h5></th>
                  <th><h5>OneMore</h5></th>
                  <th style="white-space:nowrap">
                    <h5>Thing3</h5>
                    <md-button class="md-icon-button" style="bottom: 4px;margin-left:-3em">
                      <md-tooltip md-direction="auto" class="multiple-line-tooltip">
                        Some ToolTip Information Here
                      </md-tooltip>
                      <i class="material-icons md-dark">info</i>
                    </md-button>
                  </th>
                </tr>
              </thead>

我的问题是信息图标似乎总是显示在“Thing3”h5元素下面。见下图：

感谢所有帮助。

Answer 1

h5是块级元素 - 这是设计的。

也许尝试使用像<h5 style="display:inline">这样的内联元素，或者使用内联样式。

start

Answer 2

问题是<h5>是一个块级元素。您应该只需将标题单元格的子项浮动到left

即可解决此问题

th > * {
  float: left;
}

<table>
  <thead>
    <tr>
      <th>
        <h5>Some</h5>
      </th>
      <th>
        <h5>Thing</h5>
      </th>
      <th>
        <h5>Another</h5>
      </th>
      <th>
        <h5>Thing2</h5>
      </th>
      <th>
        <h5>OneMore</h5>
      </th>
      <th>
        <h5>Thing3</h5>
        <img src="http://placehold.it/50" />
      </th>
    </tr>
  </thead>
</table>

但是，上面的示例使用简单图像替换md-button和i。如果上述内容对您不起作用，请尝试将float: left替换为display: inline-block。

希望这有帮助！：）

ASP.NET MVC Force元素在同一行上

2 个答案: