0

私はWebデザインに不慣れで、ボタン<div>を1つに<div>水平に配置するいくつかの方法を試しています。使っdisplay:inline-blockてみfloat:leftましたが、どちらもうまくいきませんでした。誰かがそこのエラーは何であるか教えてもらえますか：

4

4 に答える 4

3

そこに、を効果的に無効にするclear:bothステートメントがありますfloat:left;。また、含まれているdivのサイズは125ピクセルと小さいため、フロートが収まらないほど小さすぎる可能性があります。コンテナを自動サイズ設定し、グラフィックデザインフェーズに到達したら後でサイズを制限することができます。

また、そこには不要でおそらくバグのあるマークアップがたくさんあります。メンテナンスに多くの時間とお金を投資する前に、体系的な書き直しを検討する必要があります。同じレイアウトをはるかに単純でエラーが発生しにくい方法で取得できる可能性があります。

于 2013-03-04T14:29:36.740 に答える
3

ヨウザ！デバッグの最初のルール：条件を単純化します。あなたはそのフィドルにたくさんのCSSを詰め込んでいるので、誰もがあなたの問題に焦点を合わせるのは難しいです。

ボタンが同じ行に水平に表示されないようにする2つのことがあります。

.pin .actions {
    width: 125px;
}

これにより、コンテナが狭すぎて、1行に複数のボタンを収めることができなくなりました。300pxに変更してみてください。（または、あなたが知っている、より大きなもの。）

.actions .WhiteButton.Button11 {
    clear: both;
}

このスタイルは、ボタンの右または左にフロートアイテムを配置できないことを意味します。

これらの両方を変更すると、必要なものが得られるはずです。

http://jsfiddle.net/nate/wZf4C/2/

于 2013-03-04T14:30:34.150 に答える
0 
<style>
.grid{
    width:200px;
    height:200px;
    background-color:#666666;
    float:left;
    margin:5px;
}
</style>

<div class="grid">Div 1</div>
<div class="grid">Div 2</div>
<div class="grid">Div 3</div>
于 2013-03-04T14:32:31.307 に答える
0

簡単なcssコード行で問題が解決すると思います。

maring-left:auto;
margin-right:auto;

div整列またはspan水平にしたいときにこのトリックを使用します

于 2013-03-04T15:06:59.053 に答える