재조정 할 때 충돌하는 버튼을 피하십시오.

Question

웹 브라우저의 페이지가 더 작은 크기로 재조정 될 때이 두 버튼이 서로 부딪치지 않게하십시오.

나는 여백을 사용하려고 시도했지만 두 버튼 모두 절대 위치에 있기 때문에 전혀 영향을 미치지 않습니다.

여기이

#appButtons{ 
 
\t height:40px; 
 
\t width:125px; 
 
\t background-color:#000080; 
 
\t border:solid 1px #000080; 
 
\t color:white; 
 
\t border-radius:4px; 
 
\t text-align:center; 
 
\t margin-bottom:0px; 
 
} 
 

 
#appButtons:hover{ 
 
\t background-color:#E9E9E9; 
 
\t color:#000080; 
 
}

<table> 
 
    <tr style="display:none"> 
 
    <button id="appButtons" name="see_words" style="position:absolute;left:25%;top:10%;display: inline-block;">Check words in your dictionary</button><br> 
 
    </tr> 
 
    <tr> 
 
    <button id="appButtons" name="add_words" style="position:absolute;right:25%;top:10%;display:inline-block;">Add words to your dictionary</button><br> 
 
    </tr> 
 
</table>

당신이 다음 CSS에서 부트 스트랩에 익숙하지 않은 경우, 부트 스트랩을 사용할 필요가

Answer 1

요소에 인라인 스타일을 사용해서는 안되므로 요소를 제거해야합니다. 나는 또한 flexbox를 사용하여 귀하의 예제를 다시 작성합니다. 이게 도움이 되길 바란다!

HTML :

<div class="container"> 
    <button id="appButtons" name="see_words">Check words in your dictionary</button> 
    <button id="appButtons" name="add_words">Add words to your dictionary</button> 
</div> 

CSS : 버튼이 절대적으로 배치되는 것이 정말 필요

.container { 
    display: flex; 
    justify-content: center; 
} 

.container button { 
    margin: 50px; 
    /* add whatever margin you want here */ 
} 

Answer 2

에 대한 HTML과 CSS, 당신은 미디어를 사용할 수 있습니다 귀하의 웹 페이지를 반응 적으로 만들기위한 질의.

미디어 쿼리와 관련된 개념과 예제를 확인하려면 아래 링크를 클릭하십시오. https://www.w3schools.com/css/css3_mediaqueries.asp