입력 필드에 인접한 버튼의 위치를 어떻게 만드나요?

나는 아래 그림처럼과 같은 div 구조를 가지고 있습니다. 새로 고침 버튼이 입력 필드 근처에 표시되는 것을 볼 수 있습니다. 이는 웹보기에서 현재 보이는대로 잘 작동합니다. 아이폰 6s 또는 7, 그 장치에 상관없이, 그때 버튼은 두 입력 필드 사이에 인접한 필드로 내려 오지 않는 반응이 행동하지 않습니다. 대신이 점점 나를 돕거나 장치보기 아래입력 필드에 인접한 버튼의 위치를 어떻게 만드나요?

에서이 버튼을 표시하는 더 좋은 방법을 제안하십시오 코드입니다 :

CSS

.captcha-div{ 
    margin-bottom: 28px !important; 
} 

.captcha-field{ 
    margin-bottom: 15px !important; 
    border-radius: 8px !important; 
} 

.captcha-inpt{ 
    border-radius: 8px !important; 
    height: 40px !important; 
} 

.refresh-icon{ 
    display: block !important; 
} 

.refresh-btn{ 
    margin-left: 15px !important; 
    height: 40px !important; 
    border-radius: 8px !important; 
}

HTML

<body id="indexBody"> 
    <div id="mainContainer" class="container-fluid"> 
    <div class="row"> 
     <div class="col-md-12 col-sm-12 col-xs-12"> 
     <div id="appBody" class="row app-body"> 
      <div class="col-md-12 col-sm-12 col-xs-12"> 
      <div> 
       <div class="input-group captcha-div"> 
       <input oncopy="return false;" disabled="disabled" type="text" class="form-control form-control-manual captcha-field" id="mainCaptcha"> 

       <input class="form-control captcha-inpt" type="text" id="txtInput" name="captcha" onpaste="return false;" /> 

       <span class="input-group-btn refresh-icon"> 
             <button id="refresh" onclick="Captcha();" class="btn btn-default refresh-btn" type="button"> 
              <span class="glyphicon glyphicon-refresh"></span> 
       </button> 
       </span> 
       </div> 
      </div> 
      </div> 
     </div> 
     </div> 
    </div> 
    </div> 
</body>

출처

2017-11-28 OM The Eternity

확인이 질문에 대한 정답. 어쩌면 그것은 당신에게 유용 할 것입니다. 나는 이미 많은 웹 사이트에서 그것을 사용했고 반응이 좋은 디자인을위한 매력처럼 작동한다. https://stackoverflow.com/questions/7189608/how-do-i-make-an-input-element-occupy-all-remaining-horizontal -space –

.captcha-div { 
 
    margin-bottom: 28px !important; 
 
} 
 

 
.captcha-field { 
 
    margin-bottom: 15px !important; 
 
    border-radius: 8px !important; 
 
} 
 

 
.captcha-inpt { 
 
    border-radius: 8px !important; 
 
    height: 40px !important; 
 
} 
 

 
.refresh-icon { 
 
    display: block !important; 
 
} 
 

 
.refresh-btn { 
 
    margin-left: 15px !important; 
 
    height: 40px !important; 
 
    border-radius: 8px !important; 
 
} 
 
.input-group { 
 
    padding-right: 50px; 
 
} 
 

 
.input-group-btn.refresh-icon { 
 
    position: absolute; 
 
    right: 0px; 
 
    width: 40px; 
 
    height: 40px; 
 
} 
 

 
.input-group-btn.refresh-icon button { 
 
    margin-left: 0px!important; 
 
}

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<body id="indexBody"> 
 
    <div id="mainContainer" class="container-fluid"> 
 
    <div class="row"> 
 
     <div class="col-md-12 col-sm-12 col-xs-12"> 
 
     <div id="appBody" class="row app-body"> 
 
      <div class="col-md-12 col-sm-12 col-xs-12"> 
 
      <div> 
 
       <div class="input-group captcha-div"> 
 
       <input oncopy="return false;" disabled="disabled" type="text" class="form-control form-control-manual captcha-field" id="mainCaptcha"> 
 

 
       <input class="form-control captcha-inpt" type="text" id="txtInput" name="captcha" onpaste="return false;" /> 
 

 
       <span class="input-group-btn refresh-icon"> 
 
             <button id="refresh" onclick="Captcha();" class="btn btn-default refresh-btn" type="button"> 
 
              <span class="glyphicon glyphicon-refresh"></span> 
 
       </button> 
 
       </span> 
 
       </div> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</body>

당신이 CSS를 시도 할 수 있습니다

.captcha-div { 
    position: relative; 
    padding-right: 50px; 
} 
.input-group-btn.refresh-icon { 
    position: absolute; 
    right: 0px; 
    left: auto; 
    top: 0px; 
    width: 40px; 
    height: 40px; 
} 
.captcha-div input { 
    display: inline-block; 
} 
.input-group-btn.refresh-icon button { 
    margin: 0px!important; 
}

출처

2017-11-28 08:13:56 veera

이것은 기존 웹 구조를 변형시키고 예상대로 결과를 제공하지 않습니다. –

이제 확인하겠습니다. – veera

예 그것은 내가 원한 것에 아주 가깝습니다 ... 내 페이지에 대한 나의 길을 편집했습니다. 어쨌든 고마워요. –

입력 필드에 인접한 버튼의 위치를 ​​어떻게 만드나요?

답변

관련 문제

입력 필드에 인접한 버튼의 위치를 어떻게 만드나요?