form 숙제 질문

2 글 보임 - 1 에서 2 까지 (총 2 중에서)

글쓴이

글

2024년 5월 26일 12:26 #124143

참가자

Last name 위에 입력칸을 100%로 설정했는데, 
노란색 부분까지 튀어나오는데 원인을 못 찾겠습니다.

.main-email{
    width: 100%;
    margin: auto;
}

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link href="css/main.css" rel="stylesheet">
    <div class="main_box">
        <div class="sub_box">
            <h1>contact us</h1>
            <form>
                <div>
                <h3>Your Email</h3>
                <input class="main-email" type="email" placeholder="das@gmail.com">
                </div>
                
                <div class = "first-name">
                    <h3>First name</h3>
                    <input  type="text">
                </div>

                <div class = "last-name">
                    <h3>Last name</h3>
                    <input  type="text">
                </div>

                <div style = "clear : both"></div>

                <div>
                    <h3>Message</h3>
                    <textarea></textarea>
                </div>
                <br>
                <div class="check-box">
                    <input type="checkbox">Subscribe
                </div>

                <div>
                    <button class="main-button">send</button>
                </div>

            </form>
        </div>
    </div>
</head>

.main_box{
    width :450px;
    height : 800px;
    background: #eeee;
    position : relative;

.sub_box{
    width : 90%;
    height : 90%;
    background: #eeee;
    position : block;
    margin-left: auto;
    margin-right: auto;
    margin: auto;

.main-email{
    width: 100%;
    margin: auto;
}

.first-name{
    float : left;
    padding-right: 15px;
}

.last-name{
    float : right;
}

.check-box{
    float : left;
}

.main-button{
    background-color: #ff9900; /* 주황색 배경 */
    border: none; /* 테두리 제거 */
    color: white; /* 텍스트 색상 */
    padding: 10px 20px; /* 안쪽 여백 */
    text-align: center; /* 텍스트 가운데 정렬 */
    text-decoration: none; /* 언더라인 제거 */
    font-size: 16px; /* 폰트 크기 */
    font-weight: bold; /* 폰트 굵기 */
    text-transform: uppercase; /* 모든 텍스트를 대문자로 변환 */
    cursor: pointer;
    float : right;   
}

이 게시글은 김다선에 의해 1 년, 9 월 전에 수정됐습니다.

2024년 5월 26일 15:37 #124167

codingapple

키 마스터

input에 box-sizing 속성 조절해봅시다

글쓴이

글

2 글 보임 - 1 에서 2 까지 (총 2 중에서)

답변은 로그인 후 가능합니다.

로그인

form 숙제 질문

https://codingapple.com/wp-content/uploads/2019/06/logo2-3.png