Question

我有一个看起来像this的div结构，我们可以看到一个刷新按钮显示在输入字段旁边，在网页视图中可以正常显示，如果我们切换查看响应，说iphone 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>

Answer 1

.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;
}

如何使输入字段旁边的按钮位置响应？

1 个答案: