센터 반응 네비게이션 아이콘

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.