简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
테이블이 수직이 아닌 수평으로 늘어납니다.
P粉087074897
P粉087074897 2023-09-15 17:32:14
0
1
530

저는 계산기를 만들려고 노력 중이고 현재 HTML과 CSS 작업을 하고 있습니다. 계산기를 세로, 가로 모두 더 크게 만들려고 합니다. width: 100% 또는 flex: 1 1 100%; 를 사용하여 컨테이너에 맞게 너비를 쉽게 늘릴 수 있습니다. 그러나 height: 100%로 높이를 늘리려고 할 때마다 컨테이너와 입력 버튼의 경계를 벗어납니다. 거대해집니다. flex-basis와 flex-grow를 사용해 수직으로도 성장시키려고 노력했지만 그럴 수 없습니다. 

<body>
    <div class="container">
            <form>
                <div class="display">
                    <input type="text" name="display">
                </div>
                <div class="column1">
                    <input type="button" value="AC">
                    <input type="button" value="+/-">
                    <input type="button" value="%">
                    <input type="button" value="/">
                </div>
                <div class="column2">
                    <input type="button" value="7">
                    <input type="button" value="8">
                    <input type="button" value="9">
                    <input type="button" value="*">
                </div>
                <div class="column3">
                    <input type="button" value="4">
                    <input type="button" value="5">
                    <input type="button" value="6">
                    <input type="button" value="-">
                </div>
                <div class="column4">
                    <input type="button" value="1">
                    <input type="button" value="2">
                    <input type="button" value="3">
                    <input type="button" value="+">
                </div>
                <div class="column5">
                    <input type="button" value="0">
                    <input type="button" value=".">
                    <input type="button" value="=">
                </div>
            </form>
    </div>
</body>


html {
    height: 100%;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    height: 100%;
}

.container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    height: 50%;
    width: 30%;
}

form {
    flex: 0 1 100%;
}

.column1, .column2, .column3, .column4, .column5, .display {
    display: flex;
    height: 100%;
}

.column1 input, .column2 input, .column3 input, .column4 input, .column5 input, .display input {
    flex: 1 1 100%;
}

P粉087074897
P粉087074897

모든 응답(1)
P粉574268989
P粉5742689892023-09-16 11:43:08 1층

다음은 구체적인 작동 방법입니다:

으아악
좋다 +0
답글 추가
인기 주제
더>
인기 기사
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트：공공복지 온라인 PHP 교육，PHP 학습자의 빠른 성장을 도와주세요！