センター対応のナビゲーションアイコン

Question

誰も助けることができますか？

これらのアイコンを中央に配置し、画面の幅に反応させることに苦労しています。

画面の幅が変更されているため、これらのアイコンが近くに来るようにしようとしています 私はマージンに「％で」「私のコードで見るように」与えようとしています。幅があり、お互いに近づくが、それは本当に私がそれを期待していた方法で出ていない！これはシンプルなようですが、私は傾けることはできません！歓声みんな

html, body { 
 
    background-color:#B0B0B0; 
 
    margin: 0; 
 
    padding: 0; 
 
    font-family: sans-serif; 
 
    color: black; \t 
 
} 
 
html { 
 
    position: relative; 
 
    min-height: 100%; 
 
} 
 
body { 
 
    margin: 0 0 100px; 
 
} 
 
.navigationbar { 
 
    height: 70px; 
 
    width: 100%; 
 
    background: black; 
 
    border-bottom: solid 10px #1BD2E1; 
 
    color: white; 
 

 
} 
 
#content { 
 
    position: absolute; 
 
    background-color: white; 
 
    width: 800px; 
 
    height: 100%; 
 
    margin: auto; 
 
    top: 300px; 
 
    left: 0; 
 
    bottom: 0; 
 
    right: 0; 
 
} 
 
.logo-container { 
 
    display: block; 
 
    position: relative; 
 
    left: 20%; 
 
    width: 90%; 
 
} 
 
.blockicon { 
 
    display: block; 
 
    position: relative; 
 
    width: 60px; 
 
    height: 60px; \t 
 
    top: 45px; 
 
    background: #A81D1F; 
 
    border-radius: 15%; 
 
    cursor: pointer; 
 
    float: left; 
 
    margin-left: 3%; 
 
}

<div class="navigationbar"> 
 
    <div class="logo-container"> 
 
    <div class="blockicon"></div> 
 
    <div class="blockicon"></div> 
 
    <div class="blockicon"></div> 
 
    <div class="blockicon"></div> 
 
    <div class="blockicon"></div> 
 
    <div class="blockicon"></div> 
 
    </div></div> 
 
<div id="content"></div>

Answer 1

あなたはflexible boxesを使用することができます。

ここは例です。

十分な場所がないときにボックスを「縮小」したい場合は、余白を付けます。必要に応じて、このマージンを維持するために小さくなります。

html, body { 
 
    background-color:#B0B0B0; 
 
    margin:0; 
 
    padding:0; 
 
    font-family: sans-serif; 
 
    color: black; \t 
 
} 
 
html { 
 
    position: relative; 
 
    min-height: 100%; 
 
} 
 
body { 
 
    margin: 0 0 100px; 
 
} 
 
.navigationbar { 
 
    height: 70px; 
 
    width: 100%; 
 
    background: black; 
 
    border-bottom: solid 10px #1BD2E1; 
 
    color: white; 
 

 
} 
 
#content { 
 
    position: absolute; 
 
    background-color: white; 
 
    width: 800px; 
 
    height: 100%; 
 
    margin: auto; 
 
    top: 300px; left: 0; bottom: 0; right: 0; 
 

 
} 
 
.logo-container{ 
 
    display: flex; 
 
    flex-direction: row; 
 
    position: relative; 
 
    width: 100%; 
 
    justify-content: space-around; 
 
} 
 
.blockicon { 
 
    position: relative; 
 
    width: 60px; 
 
    height: 60px; \t 
 
    top: 45px; 
 
    background:#A81D1F; 
 
    border-radius: 15%; 
 
    cursor: pointer; 
 
    margin: 0 3%; 
 
}

<div class="navigationbar"> 
 
    <div class="logo-container" > 
 
    <div class="blockicon"> 
 
    </div> 
 
    <div class="blockicon"> 
 
    </div> 
 
    <div class="blockicon"> 
 
    </div> 
 
    <div class="blockicon"> 
 
    </div> 
 
    <div class="blockicon"> 
 
    </div> 
 
    <div class="blockicon"> 
 
    </div> 
 
    </div> 
 
</div> 
 
<div id="content"> 
 
</div>

あなたは、古いブラウザのためにそれを前に付ける必要があるかもしれません。 Current support is ~95% with prefixes and ~80% without prefixes。