0

我试图实现一个内联块元素，将左对齐，另一个将右对齐，而不改变它们的显示类型。

我想要一个 CSS 版本，否则我也可以使用 jQuery 方法。

我的意思是，我只想显示前两个按钮在左侧对齐，第三个按钮在右侧对齐。

jsBin 不工作的例子

<table>
    <thead>
      <tr>
        <th>
          <div style="background-color: lightblue; width: 600px;">
            <span style="display: inline-block; height:20px; background-color: red; margin: 5px 3px;float: left;">
              Button
            </span>

            <span style="display: inline-block; height:20px; background-color: red; margin: 5px 3px; float:right;">
              Button right
            </span>
        </div>
        </th>
      </tr>
    </thead>
    <tbody>
      <tr><td>where did the background of the header cell go? the background is still there if the elements do not float.</td></tr>
    </tbody>
  </table>
4

2 回答 2

1

只需将属性设置float:right为您的span元素。

工作示例

在您在评论中提供的第二个示例中，即带有表格的示例中，您只是遇到了这个问题，因为您没有将样式设置为th标签，而是设置了div标签。如果你设置标签的background-color和属性，你会得到你想要的width。th

另一个工作示例

于 2012-09-12T17:25:56.513 回答
1

<span>'s 是本机的内联块元素——所以声明是不必要的。您还可以将 CSS 应用于<th>元素，而不是将所有内容都包装在其中<div>，然后使用:last-child. 从技术上讲，你可以去掉float:left，但它会导致额外的 CSS 垂直对齐按钮。

CSS
    th { background-color:lightblue; width:600px; }
    th span { background-color:red; float:left; height:20px; margin:5px 3px; }
    th span:last-child { float:right }

HTML
    <th>
        <span>Button</span>
        <span>Button</span>
        <span>Button right</span>
    </th>
于 2012-09-12T18:08:25.510 回答