w3-input 필드와 같은 줄에 Fontawesome-icon을 가져옵니다.

Question

그래서이 문제에 관해서 웹 페이지 작업을하고있었습니다. w3.css (부트 스트랩 아님)로 첫 번째 양식을 만들고 싶었습니다. 완벽하게 정상적으로 작동했습니다. 그러나 여러 번 입력하여 텍스트 입력 필드 앞에 fa -Fontawesome-Icon을 추가 한 후 (fa 아이콘의 높이가 텍스트 입력의 높이와 일치 함, 둘 다 같은 행에 있음), 지금 묻습니다. 너희들 밖에서 지역 사회에있어 -
Fontawesome-Icon을 텍스트 입력란의 높이와 같은 행/줄로 어떻게 가져올 수 있습니까?
Here's 내 코드 :

body { 
 
    background-color: black; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
<link href="https://www.w3schools.com/w3css/4/w3.css" rel="stylesheet"/> 
 
<form class="w3-container w3-white"> 
 
    <div class="w3-row-padding"> 
 
    <div class="w3-col m12"> 
 
     <i class="fa fa-envelope-o fa-2x fa-fw" aria-hidden="true"></i><p><input class="w3-input w3-animate-input" type="text" placeholder="E-Mail" style="width: 50%;"></p> 
 
    </div> 
 
    </div> 
 
</form>

가 어떻게이 작업을 얻을 수 있나요? 항상 사전에 모든 답변을
감사합니다,
- SearchingSolutions

Answer 1

body { 
 
    background-color: black; 
 
} 
 
.input-icon{ 
 
    float:left; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
<link href="https://www.w3schools.com/w3css/4/w3.css" rel="stylesheet"/> 
 
<form class="w3-container w3-white"> 
 
    <div class="w3-row-padding"> 
 
    <div class="w3-col m12"> 
 
     
 
<p> 
 
<i class="fa fa-envelope-o fa-2x fa-fw input-icon" aria-hidden="true"></i> 
 
<input class="w3-input w3-animate-input" type="text" placeholder="E-Mail" style="width: 50%;"> 
 
</p> 
 
    </div> 
 
    </div> 
 
</form>

이 트릭을 수행 . 더 좋은 방법이 있지만 이것이 기본입니다. 확장 효과를 제거하거나 적용 할 수 있습니다. 아이콘에서 position absolute를 사용하고 컨테이너에서 패딩을 사용할 수도 있습니다.

Answer 2

input 요소는 display: block.w3-input 클래스를 상속받습니다. 요소에 ID를 부여하고 display: inline을 설정하면이 내용을 덮어 쓸 수 있습니다. 그 추가 :

#inline-input { 
    display: inline; 
} 

*

<input id = "inline-input" class="w3-input w3-animate-input" type="text" placeholder="E-Mail" style="width: 50%;"> 

편집 : 또한 <p></p> 태그를 제거합니다.