잡동사니

CSS에서 button을 부모와 독립적으로 만드는 방법

카테고리 없음
2020. 8. 8. 00:02
반응형

질문

메인 div 블록과 "이동"button이있는 "랩"블록이 있습니다.

메인 블록의 높이를 설정하지 않으면 button이 최대한 작아집니다. 하지만 특정 높이를 설정하면 button이 세로로 늘어납니다.

기본 div 블록의 높이와 관계없이 button을 늘이고 싶습니다.

.main-action-box {
    width: 84%;
    margin: 50px auto 0 auto;
    /*border: 1px solid #f00;*/
    padding: 50px 45px;
    border: 1px solid #eee;
    border-radius: 5px;
}

.main-action-box {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.06), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
    background-color: #fff;
}

.main-action-box > .input-wrap {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
    width: 100%;
}

.main-action-box > .input-wrap > input {
    width: 100%;
    margin-right: 15px;
    font-size: 1.6rem;
    padding: 15px 10px 15px 10px;
    outline: none;
    border: 1px solid #aaa;
    border-radius: 5px 0 0 5px;
    color: #333;
    font-weight: 300;
}

.main-action-box > .input-wrap > .submit {
    padding: 0 25px;
    color: #fff;
    background-color: #ff6666;
    height: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    border-radius: 0 5px 5px 0;
}

.main-action-box > .result {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    width: 100%;
    margin: 50px auto;
}

.main-action-box > .result > p {
    width: 100%;
    text-align: center;
    font-size: 1.9rem;
    color: #333;
}

.main-action-box > .result > .link {
    width: 84%;
    margin: 0 auto;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.main-action-box > .result > .link > a {
    color: #ff6666;
    font-size: 1.5rem;
}

.main-action-box > .result > .link > .copy {
    margin-left: 25px;
    color: #aaa;
    font-size: 1.1rem;
    font-weight: 300;
    cursor: pointer;
}
<div class="main-action-box">
    <div class="input-wrap">
        <input type="text" placeholder="type type type">
        <div class="submit">
            Go
        </div>
    </div>
    <div class="result">
        <p>Wrong result</p>
    </div>
</div>

<div class="main-action-box" style="height: 350px">
    <div class="input-wrap">
        <input type="text" placeholder="type type type">
        <div class="submit">
            Go
        </div>
    </div>
    <div class="result">
        <p>Result that I need</p>
    </div>
</div>
Expand snippet


답변1

다음을 제거하십시오.

  1. align-items: flex-start; from .main-action-box > .input-wrap
  2. height: 100%; from .main-action-box > .input-wrap > .submit

.main-action-box {
    width: 84%;
    margin: 50px auto 0 auto;
    /*border: 1px solid #f00;*/
    padding: 50px 45px;
    border: 1px solid #eee;
    border-radius: 5px;
}

.main-action-box {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.06), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
    background-color: #fff;
}

.main-action-box > .input-wrap {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    width: 100%;
}

.main-action-box > .input-wrap > input {
    width: 100%;
    margin-right: 15px;
    font-size: 1.6rem;
    padding: 15px 10px 15px 10px;
    outline: none;
    border: 1px solid #aaa;
    border-radius: 5px 0 0 5px;
    color: #333;
    font-weight: 300;
}

.main-action-box > .input-wrap > .submit {
    padding: 0 25px;
    color: #fff;
    background-color: #ff6666;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    border-radius: 0 5px 5px 0;
}

.main-action-box > .result {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    width: 100%;
    margin: 50px auto;
}

.main-action-box > .result > p {
    width: 100%;
    text-align: center;
    font-size: 1.9rem;
    color: #333;
}

.main-action-box > .result > .link {
    width: 84%;
    margin: 0 auto;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.main-action-box > .result > .link > a {
    color: #ff6666;
    font-size: 1.5rem;
}

.main-action-box > .result > .link > .copy {
    margin-left: 25px;
    color: #aaa;
    font-size: 1.1rem;
    font-weight: 300;
    cursor: pointer;
}
<div class="main-action-box">
    <div class="input-wrap">
        <input type="text" placeholder="type type type">
        <div class="submit">
            Go
        </div>
    </div>
    <div class="result">
        <p>Wrong result</p>
    </div>
</div>

<div class="main-action-box" style="height: 350px">
    <div class="input-wrap">
        <input type="text" placeholder="type type type">
        <div class="submit">
            Go
        </div>
    </div>
    <div class="result">
        <p>Result that I need</p>
    </div>
</div>
Expand snippet



답변2

.main-action-box {
    width: 84%;
    margin: 50px auto 0 auto;
    /*border: 1px solid #f00;*/
    padding: 50px 45px;
    border: 1px solid #eee;
    border-radius: 5px;
}

.main-action-box {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.06), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
    background-color: #fff;
}

.main-action-box > .input-wrap {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: stretch;
    width: 100%;
}

.main-action-box > .input-wrap > input {
    width: 100%;
    margin-right: 15px;
    font-size: 1.6rem;
    padding: 15px 10px 15px 10px;
    outline: none;
    border: 1px solid #aaa;
    border-radius: 5px 0 0 5px;
    color: #333;
    font-weight: 300;
}

.main-action-box > .input-wrap > .submit {
    padding: 0 25px;
    color: #fff;
    background-color: #ff6666;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    border-radius: 0 5px 5px 0;
}

.main-action-box > .result {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    width: 100%;
    margin: 50px auto;
}

.main-action-box > .result > p {
    width: 100%;
    text-align: center;
    font-size: 1.9rem;
    color: #333;
}

.main-action-box > .result > .link {
    width: 84%;
    margin: 0 auto;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.main-action-box > .result > .link > a {
    color: #ff6666;
    font-size: 1.5rem;
}

.main-action-box > .result > .link > .copy {
    margin-left: 25px;
    color: #aaa;
    font-size: 1.1rem;
    font-weight: 300;
    cursor: pointer;
}
<div class="main-action-box">
    <div class="input-wrap">
        <input type="text" placeholder="type type type">
        <div class="submit">
            Go
        </div>
    </div>
    <div class="result">
        <p>Result that you need!</p>
    </div>
</div>
Expand snippet



 

 

 

 

출처 : https://stackoverflow.com/questions/62682346/how-to-make-button-in-css-independent-from-parent

반응형
저작자표시

이 글을 공유합시다

facebook twitter googleplus kakaoTalk kakaostory naver band
댓글

티스토리툴바