在输入标签内添加按钮答案

【问题标题】：Add button inside an Input Tag在输入标签内添加按钮
【发布时间】：2019-04-23 16:39:36
【问题描述】：

我创建了一个登录 form。我想显示一个文本/按钮，上面写着“忘记？”在密码字段的右侧。

作为参考，你们可以打开这个网站并点击登录：https://www.adda247.com/

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>

<form>
		<div class="row">
			<div class="col-md-12 col-sm-12 col-xs-12">
				<button class="form-control btn btn-info " style="background:#4568B2;height:40px">
				<i class="fa fa-facebook"></i>&nbsp;Continue with Facebook
				</button>
			</div>
			<br><br><br>
			<div class="col-md-12 col-sm-12 col-xs-12">
				<button class="form-control btn btn-default" style="height:40px;border:2px solid black">
				<i class="fa fa-google"></i>&nbsp;Continue with Google
				</button>
			</div>
			<br><br><br>
			<div class="col-md-5 col-sm-5 col-xs-5" ></div>
			<div class="col-md-2 col-sm-2 col-xs-2" align="center"><b>OR</b></div>
			<div class="col-md-5 col-sm-5 col-xs-5"></div><br><br><br>
			
			<div class="col-md-12 col-sm-12 col-xs-12">
				<input type="text" name="name" class="form-control" style="height:40px;" placeholder="Email">					
			</div>
			<br><br><br>
			<div class="col-md-12 col-sm-12 col-xs-12 form-group has-feedback">
				<input type="text" name="pass" class="form-control" style="height:40px;" placeholder="Password">
				<p class="form-control-feedback">Forgot?</p>					
			</div>
			
			<br><br><br>
			<div class="col-md-12 col-sm-12 col-xs-12">
				<button name="login" class="btn btn-warning form-control" style="height:40px;font-size:20px">Login</button>
			</div>
			<br><br><br>
			<div class="col-md-12 col-sm-12 col-xs-12">
				<p align="center" style="font-size:16px">Don't Have an Account?
					<span ><a href="#" style="color: orange">SIgn Up</a></span>
				</p>
			</div>
		</div>
	</form>

希望你能帮助我！

【问题讨论】：

出了什么问题
“忘记了吗？”正在输入字段之外。它应该在@Saravana 字段内
@raj 你想减少输入密码的宽度以避免forgot button重叠？

标签： css bootstrap-4

【解决方案1】：

如果我理解正确的问题，这就是解决方案吗？你只需要在你的 css 中操作显示参数

           <div class="container">
           <div class="col-md-12 col-sm-12 col-xs-12">
                <button class="form-control btn btn-default" style="height:40px;border:2px solid black">
                <i class="fa fa-google"></i>&nbsp;Continue with Google
                </button>
            </div>
            <br><br><br>
            <div class="col-md-5 col-sm-5 col-xs-5" ></div>
            <div class="col-md-2 col-sm-2 col-xs-2"><b>OR</b></div>
            <div class="col-md-5 col-sm-5 col-xs-5"></div><br><br><br>

            <div class="col-md-12 col-sm-12 col-xs-12">
                <input type="text" name="name" class="form-control" style="height:40px;" placeholder="Email">                   
            </div>
            <br><br><br>
            <div class="col-md-12 col-sm-12 col-xs-12 form-group has-feedback">
                <input type="text" name="pass" class="form-control" style="height:40px; width: 90%; display: inline-block" placeholder="Password">
                <a class="form-control-feedback" style="display:inline-block; width:5%" href="#">Forgot?</a>                    
            </div>

            <br><br><br>
            <div class="col-md-12 col-sm-12 col-xs-12">
                <button name="login" class="btn btn-warning form-control" style="height:40px;font-size:20px">Login</button>
            </div>

            <br><br><br>
            <div class="col-md-12 col-sm-12 col-xs-12">
                <p style="font-size:16px">Don't Have an Account?
                    <span ><a href="#" style="color: orange">SIgn Up</a></span>
                </p>
            </div>
        </div>

【讨论】：

您可能需要删除我设置的容器 div 才能看到，

【解决方案2】：

在密码字段padding-right: 80px添加填充

【讨论】：

【解决方案3】：

将密码字段容器设置为position: relative，然后设置“FORGOT？”提示position: absolute 和right: 1em（使其固定在右侧）然后使用CSS 或引导类根据需要进行设计（您仍然需要一些纯CSS，我使用了相同的padding 和@ 987654325@ 作为本例中的输入）。

为避免重叠问题，我在“FORGOT？”上设置了白色背景。提示因此不显示任何重叠文本（您也可以通过 bg-white 类添加它）但您可以在您的 <input> 上设置一个 padding-right 等于“FORGOT？”的宽度提示。

.form-group.has-feedback {
  position: relative;
}

.form-control-feedback {
    position: absolute;
    display: inline-block;
    top: 1px;
    right: 1em;
    background: #fff;
    bottom: 0;
    margin: 0;
    height: calc(1.5em + .75rem + 2px);
    padding: .375rem .75rem;
    border-radius: 3px;
}

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>

<form>
		<div class="row">

			<div class="col-md-12 col-sm-12 col-xs-12 mb-4">
				<button class="form-control btn btn-info " style="background:#4568B2;height:40px">
				<i class="fa fa-facebook"></i>&nbsp;Continue with Facebook
				</button>
			</div>

			<div class="col-md-12 col-sm-12 col-xs-12 mb-4">
				<button class="form-control btn btn-default" style="height:40px;border:2px solid black">
				<i class="fa fa-google"></i>&nbsp;Continue with Google
				</button>
			</div>

			<div class="col-md-5 col-sm-5 col-xs-5 mb-4" ></div>
			<div class="col-md-2 col-sm-2 col-xs-2 mb-4" align="center"><b>OR</b></div>
			<div class="col-md-5 col-sm-5 col-xs-5 mb-4"></div>

			<div class="col-md-12 col-sm-12 col-xs-12 mb-4">
				<input type="text" name="name" class="form-control" style="height:40px;" placeholder="Email">					
			</div>

			<div class="col-md-12 col-sm-12 col-xs-12 form-group has-feedback mb-4">
				<input type="text" name="pass" class="form-control" style="height:40px;" placeholder="Password">
				<p class="form-control-feedback">FORGOT?</p>					
			</div>

			<div class="col-md-12 col-sm-12 col-xs-12 mb-4">
				<button name="login" class="btn btn-warning form-control" style="height:40px;font-size:20px">Login</button>
			</div>

			<div class="col-md-12 col-sm-12 col-xs-12 mb-4">
				<p align="center" style="font-size:16px">Don't Have an Account?
					<span ><a href="#" style="color: orange">SIgn Up</a></span>
				</p>
			</div>
		</div>
</form>

我建议您不要使用 <br> 元素在您的项目之间创建空格，引导程序有用于此的类（例如 .mb-4）。

【讨论】：

【解决方案4】：

我已经使用位置相对和绝对的方法来移动输入框内的按钮。

删除 br 并使用 mt- 和 mb- 值在引导程序 4 中获取间距。

.form-group.has-feedback {
    position: relative;
}
.form-control-feedback {
    position: absolute;
    top: 0;
    right: 15px;
    padding: 6px 8px 9px 8px;
    display: inline-block;
}
.form-group.has-feedback .form-control {
    padding: 0 70px 0 0;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>


<form>
    <div class="row">
        <div class="col-md-12 col-sm-12 col-xs-12 mb-3">
            <button class="form-control btn btn-info " style="background:#4568B2;height:40px">
                <i class="fa fa-facebook"></i>&nbsp;Continue with Facebook
            </button>
        </div>

        <div class="col-md-12 col-sm-12 col-xs-12 mb-3">
            <button class="form-control btn btn-default" style="height:40px;border:2px solid black">
                <i class="fa fa-google"></i>&nbsp;Continue with Google
            </button>
        </div>

        <div class="col-md-5 col-sm-5 col-xs-5"></div>
        <div class="col-md-2 col-sm-2 col-xs-2" align="center"><b>OR</b></div>
        <div class="col-md-5 col-sm-5 col-xs-5"></div>

        <div class="col-md-12 col-sm-12 col-xs-12 my-3">
            <input type="text" name="name" class="form-control" style="height:40px;" placeholder="Email">
        </div>

        <div class="col-md-12 col-sm-12 col-xs-12 form-group has-feedback">
            <input type="text" name="pass" class="form-control" style="height:40px;" placeholder="Password">
            <p class="form-control-feedback">Forgot?</p>
        </div>

        <div class="col-md-12 col-sm-12 col-xs-12  mb-3">
            <button name="login" class="btn btn-warning form-control" style="height:40px;font-size:20px">Login</button>
        </div>

        <div class="col-md-12 col-sm-12 col-xs-12">
            <p align="center" style="font-size:16px">Don't Have an Account?
                <span><a href="#" style="color: orange">SIgn Up</a></span>
            </p>
        </div>
    </div>
</form>

【讨论】：