0

私は、表示タイプを変更せずに、1 つのインライン ブロック要素を左に配置し、もう 1 つのインライン ブロック要素を右に配置しようとしています。

CSS バージョンを入手したいと思います。それ以外の場合は、jQuery アプローチも使用できます。

つまり、最初の 2 つのボタンを左側に配置し、3 つ目のボタンを右側に配置したかっただけです。

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

<span>はネイティブにインラインブロック要素であるため、宣言は不要です。<th>すべてを要素でラップするのではなく、CSSを要素に適用して<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 に答える
1

プロパティfloat:rightをspan要素に設定するだけです。

実施例

コメントで提供した 2 番目の例 (テーブルを含むもの) では、スタイルをthタグではなくタグに設定したため、単純にその問題が発生しましたdiv。のプロパティをタグに設定するbackground-colorとwidth、th必要なものが得られます。

別の実施例

于 2012-09-12T17:25:56.513 に答える