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

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

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

여기이

#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에서 부트 스트랩에 익숙하지 않은 경우, 부트 스트랩을 사용할 필요가

출처

2017-03-05 leveeee

인가? –

@RalphDavidAbernathy 꼭 그렇지는 않지만 부모 div를 이동하지 않고 "어디서나"배치 할 수있는 방법이 있습니까? – leveeee

실제로 어떻게 단추를 배치하고 싶습니까? 당신은 그것들을 수평 및 수직 중심에 두어 각 버튼 주위에 여백을 갖길 원하십니까? "어디서나"정의 할 수 있습니까? 이 문제를 해결하는 데 도움을 주려고합니다. –

요소에 인라인 스타일을 사용해서는 안되므로 요소를 제거해야합니다. 나는 또한 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 */ 
}

출처

2017-03-05 15:40:07

좋아, 지금 내가 잘못한 것을보고, 내가 뭘 했어야하는지. 고맙습니다 – leveeee

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

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

출처

2017-03-05 14:07:33

저는 부트 스트랩에 익숙하지만 차라리 다른 것을 사용하고 싶습니다. CSS 링크에 감사드립니다! – leveeee

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

답변

관련 문제