는

Question

내가 입력 텍스트 상자의 오른쪽 끝에 배치 할 glyphicon-remove를 원하는 입력 텍스트 상자 안에 glyphicon 제거 이동, 여기 내 코드 -

*{ 
 
    margin: 0; 
 
    padding: 0; 
 
    box-sizing: border-box; 
 
} 
 
body{ 
 
    position: relative; 
 
    background-color: rgba(0,0,0,0.9); 
 
    height: 100vh; 
 
} 
 
.content{ 
 
    text-align: center; 
 
    position: absolute; 
 
    width: 100%; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform:translate(-50%,-50%); 
 
} 
 
.fill_text{ 
 
    width: 20%; 
 
    height: 42px; 
 
    background-color: #DDD; 
 
    border-radius: 20px; 
 
    font-size: 20px; 
 
    padding: 10px; 
 
    border: 5px solid #E35F14; 
 
    margin: 10px auto; 
 
    outline: 0; 
 
    position: relative; 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
    <div class="content"> 
 
    <input type="text" class="fill_text"> 
 
    <span class="glyphicon glyphicon-remove"></span> 
 
    </input> 
 
    </div>

내가 상대적으로 입력 텍스트 상자의 위치를 ​​설정하고 있어요 제거 아이콘의 위치를 ​​절대적으로 지정하여 시도했지만 작동하지 않습니다. 그게 효과가없는 이유를 말해 주실 수 있습니까?

Answer 1

요소는 <input> 요소 안에 허용되지 않습니다.

.glyphicon-remove{ 
     position: absolute; 
     top: 50%; 
     right: 30px; 
     z-index:10; 
    } 

*{ 
 
    margin: 0; 
 
    padding: 0; 
 
    box-sizing: border-box; 
 
} 
 
body{ 
 
    position: relative; 
 
    background-color: rgba(0,0,0,0.9); 
 
    height: 100vh; 
 
} 
 
.content{ 
 
    text-align: center; 
 
    position: absolute; 
 
    width: 100%; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform:translate(-50%,-50%); 
 
} 
 
.fill_text{ 
 
    width: 20%; 
 
    height: 42px; 
 
    background-color: #DDD; 
 
    border-radius: 20px; 
 
    font-size: 20px; 
 
    padding: 10px; 
 
    border: 5px solid #E35F14; 
 
    margin: 10px auto; 
 
    outline: 0; 
 
    position: relative; 
 

 
    
 
} 
 
.glyphicon-remove{ 
 
    position: absolute; 
 
    top: 50%; 
 
    right: 30px; 
 
    z-index:10; 
 
    cursor:pointer; 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
    <div class="content"> 
 
    <input type="text" class="fill_text"/> 
 
    <span class="glyphicon glyphicon-remove"></span> 
 
    </div>

이