3

センタリングに関する質問と回答が不足しているわけではありませんが、フローティングを含む特定の状況を考えると、それを機能させることができませんでした.

3 つのフローティング入力要素 (分割ボタン、テキスト、チェックボックス) を含むコンテナー DIV を中央に配置して、ページのサイズが大きく変更されたときに、次のようにします。

  ||.....[      ][v]     [            ]       [ ] label .....||

これに

  ||......................[      ][v]     [            ]       [ ] label.......................||

それらは問題なく浮かびますが、ページを広くすると左にとどまります。

  ||.....[      ][v]     [            ]       [ ] label .......................................||

入力要素が横並びではなく積み重ねられるようにフロートを削除すると、次のようになります。

  [      ][v]   
  [            ]  
  [ ] label

その後、ページのサイズが変更されたときに正しく中央に配置されます。SO コンテナ内の DIV#hbox の要素に適用されている float が、センタリングを台無しにしています。 フロートが機能するように設計されているため、私がやりたいことは不可能ですか?

これが私の DOCTYPE で、マークアップは w3c で検証されます。

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

ここに私のマークアップがあります:

 <div id="term1-container">
 <div class="hbox">
    <div>
        <button id="operator1" class="operator-split-button">equals</button>
        <button id="operator1drop">show all operators</button>
    </div>
    <div><input type="text" id="term1"></input></div>
    <div><input type="checkbox" id="meta2"></input><label for="meta2" class="tinylabel">meta</label></div>
 </div>
</div>

そして、これが（機能しない）CSSです：

  #term1-container {text-align: center}
  .hbox {margin: 0 auto;}
  .hbox div {float:left; }

また、display: inline-blockをフローティング ボタン、テキスト入力、およびチェックボックスに適用してみました。テキストのみに適用されると思いますが、SO でここで見た投稿に基づいて、 #term1-container DIV にwhite-space: nowrapを適用してみました。

もう少し完全にするために、分割ボタンを作成する jQuery を次に示します。

$(".operator-split-button").button().click( function() {
alert( "foo" );
}).next().button( {
text: false,
icons: {
   primary: "ui-icon-triangle-1-s"
    }
}).click( function(){positionOperatorsMenu();} )
})
4

1 に答える 1

3

CSS:

body {
    text-align: center;
}
#term1-container {
    width: 500px;
    text-align: center;
    margin: 0 auto;
}
.hbox div {
    float: left;
}

HTML

   <div id="term1-container">
     <div class="hbox">
        <div>
         <button id="operator1" class="operator-split-button">equals</button>
         <button id="operator1drop">show all operators</button>
        </div>
       <div><input type="text" id="term1"/></div>
       <div><input type="checkbox" id="meta2"/>
      <label for="meta2" class="tinylabel">meta</label></div>
     </div>
    </div>

更新しました

固定の設定に問題がある場合width:

このようなものを使用できます

body {
    text-align: center;
}
#term1-container {
    display: table;
    white-space: nowrap;
    text-align: center;
    margin: 0 auto;
}
.hbox div {
    display: table-cell;
    display: inline
}
于 2010-05-29T17:51:04.050 に答える