0

メインの中央に配置されたdiv内のdivの整列に問題があります。

これが私のコードです

<style>
body {
  max-width: 1150px;
  min-width: 900px;
  margin:0 auto; }

.container {
  text-align:center;
  background-color:#e1e1e1; }

.box {
  width: 250px; }

.inline-block {
  color: #eee;
  margin: 10px 0px 0px 10px;
  text-align: center;
  display:inline-block; }

.one {
  height: 22px;
  background: #744; }

</style>

<div class="container">
    <div class="inline-block"><div class="one box">1</div>
    </div>
    <div class="inline-block"><div class="one box">2</div>
    </div>
    <div class="inline-block"><div class="one box">3</div>
    </div>
    <div class="inline-block"><div class="one box">4</div>
    </div>
    <div class="inline-block"><div class="one box">5</div>
    </div>
    <div class="inline-block"><div class="one box">6</div>
    </div>
    <div class="inline-block"><div class="one box">7</div>
    </div>
    <div class="inline-block"><div class="one box">8</div>
    </div>
</div>

ウィンドウのサイズを変更したときの結果

必要なもの

PS私の英語は申し訳ありませんが、あなたがこれを理解してくれることを願っています。

4

2 に答える 2

0

デモはこちら

単純に追加Float:leftするだけです

于 2013-02-24T12:53:05.243 に答える
0

.container { text-align:left;}もちろん、あなたのためにトリックを行うと思います.container > div { text-align:center;}. また、直接の子セレクターを使用する必要がないように、これらの div にクラスを追加することもお勧めします。

于 2013-02-24T13:21:15.067 に答える