HTML/CSS : 수평선에 2 개의 div를 표시하는 데 문제가 있습니까?

Question

,이를 달성하기 위해 노력하고 여기에 몇 가지 이상한 CSS의 문제가 각 수평 중앙에있는 입력 필드의 오른쪽에 경고 일을 가지고, 확인 :

가 지금 내가 중심의 입력을 가지고 있지만 상관없이 나는 float을 사용하거나 심지어 .warning div에서 변환하거나 변환합니다.이 작업을 수행 할 수 없습니다.

.warning { 
 
    display: none; 
 
    margin-top: 10px; 
 
} 
 

 
.warning p { 
 
    color: #e85748; 
 
    display: none; 
 
    transform: translateX(105%) translateY(232%); 
 
} 
 

 
.ico-circle { 
 
    width: 40px; 
 
    position: absolute; 
 
    height: 40px; 
 
    border-radius: 50%; 
 
    transform: translateX(720%) translateY(22%); 
 
    background: #e85748; 
 
} 
 

 
textarea { 
 
    border: 2px solid #a0b3b0; 
 
    resize: vertical; 
 
} 
 

 
.field-wrap { 
 
    position: relative; 
 
    width: 50%; 
 
    float: center; 
 
    margin: auto; 
 
    margin-bottom: 9px; 
 
} 
 

 
input, 
 
textarea { 
 
    padding: 15px 15px; 
 
    display: block; 
 
    margin: auto; 
 
    width: 200px; 
 
    /* height: 100%; */ 
 
    color: #333333; 
 
    border-color: #333333; 
 
    border-radius: 15px; 
 
    -webkit-transition: border-color .25s ease, box-shadow .25s ease; 
 
    transition: border-color .25s ease, box-shadow .25s ease; 
 
    border-radius: 30px; 
 
    font-size: 16px; 
 
    font-weight: 500; 
 
    border: 4px solid #333333; 
 
    line-height: 1.3; 
 
    -webkit-appearance: none; 
 
    -moz-appearance: none; 
 
    appearance: none; 
 
    text-indent: 13px; 
 
    flex: 0 0 160px; 
 
    width: 200px; 
 
    background-color: transparent; 
 
} 
 

 
input:focus { 
 
    outline: none !important; 
 
    border: 4px solid #e85748; 
 
    width: 250px; 
 
    -webkit-transition: width .25s ease; 
 
    transition: width .25s ease; 
 
}

<div class="field-wrap"> 
 
    <input id="username" type="text" placeholder="Username" required autocomplete="off"> 
 
    <div class="warning" /> 
 
    <p>Hello world</p> 
 
    <div class="ico-circle"> 
 
    </div> 
 
</div> 
 
</div> 
 

 
<div class="field-wrap"> 
 
    <input type="password" placeholder="Password" required autocomplete="off"> 
 
    <div class="warning"> 
 
    <p>Hello world</p> 
 
    <div class="ico-circle"> 
 
    </div> 
 
    </input> 
 
    </div> 
 

 
    <a href="#" class='button -dark' id="register-btn">Register</a> 
 
    <a href="#" class='bot-link' value=1><i class="icon-chevron-left"></i>Wait, take me back</a>

내가 잘못 여기서 뭐하는 거지?

Answer 1

너는 flexbox으로 할 수 있지만 입력이 더 넓거나 옆에 경고가있을 때 어떻게 나타낼 지 잘 모르겠습니다. 아마도 이것은 옳은 방향으로 당신을 가리하기에 충분합니다

.warning { 
 
    display: none; 
 
} 
 

 
.warning p { 
 
    color: #e85748; 
 
} 
 

 
.ico-circle { 
 
    width: 40px; 
 
    height: 40px; 
 
    border-radius: 50%; 
 
    background: #e85748; 
 
    order: -1; 
 
} 
 

 
textarea { 
 
    border: 2px solid #a0b3b0; 
 
    resize: vertical; 
 
} 
 

 
.field-wrap { 
 
    display: flex; 
 
    position: relative; 
 
    margin-bottom: 9px; 
 
} 
 

 
input, 
 
textarea { 
 
    padding: 15px 15px; 
 
    margin: auto; 
 
    width: 200px; 
 
    /* height: 100%; */ 
 
    color: #333333; 
 
    border-color: #333333; 
 
    border-radius: 15px; 
 
    -webkit-transition: border-color .25s ease, box-shadow .25s ease; 
 
    transition: border-color .25s ease, box-shadow .25s ease; 
 
    border-radius: 30px; 
 
    font-size: 16px; 
 
    font-weight: 500; 
 
    border: 4px solid #333333; 
 
    line-height: 1.3; 
 
    -webkit-appearance: none; 
 
    -moz-appearance: none; 
 
    appearance: none; 
 
    text-indent: 13px; 
 
    width: 200px; 
 
    background-color: transparent; 
 
} 
 

 
input:focus { 
 
    outline: none !important; 
 
    border: 4px solid #e85748; 
 
    width: 250px; 
 
    -webkit-transition: width .25s ease; 
 
    transition: width .25s ease; 
 
} 
 

 
input:focus:invalid+.warning { 
 
    display: flex; 
 
}

<div class="field-wrap"> 
 
    <input id="username" type="text" placeholder="Username" required autocomplete="off" /> 
 
    <div class="warning"> 
 
    <p>Hello world</p> 
 
    <div class="ico-circle"> 
 
    </div> 
 
    </div> 
 
</div> 
 

 
<div class="field-wrap"> 
 
    <input type="password" placeholder="Password" required autocomplete="off" /> 
 
    <div class="warning"> 
 
    <p>Hello world</p> 
 
    <div class="ico-circle"> 
 
    </div> 
 
    </div> 
 
</div> 
 

 
<a href="#" class='button -dark' id="register-btn">Register</a> 
 
<a href="#" class='bot-link' value=1><i class="icon-chevron-left"></i>Wait, take me back</a>