gpt4 book ai didi

html - 中心 TextBoxFor 与列中的图标

转载 作者:行者123 更新时间:2023-11-28 03:07:39 24 4
gpt4 key购买 nike

我正在尝试创建一个集中式登录表单,但使用下面的代码,输入文本左对齐,图标右对齐:

<div class="form-group">
<div class="row">
<div class="col-md-4 col-md-offset-4">
<div class="input-group">
@Html.TextBoxFor(m => m.Email, new { @class = "form-control", placeholder = "E-mail" })
@Html.ValidationMessageFor(m => m.Email, "", new { @class = "text-danger" })
<span class="input-group-addon"><i class="glyphicon glyphicon-envelope"></i></span>
</div>
</div>
</div>
</div>

输入大小设置为 280px(Site.css 文件中的 bootstrap 默认值),我不想更改它。看到下图的结果,我想知道如何加入输入和图标,并且两者在列的中心。

enter image description here

我得到的预期结果如下:

<div class="form-group">
<div class="row">
<div class="col-md-4 col-md-offset-4">
<div align="center">
<div class="input-group" style="max-width: 280px">
@Html.TextBoxFor(m => m.Email, new { @class = "form-control", placeholder = "E-mail" })
<span class="input-group-addon"><i class="glyphicon glyphicon-envelope"></i></span>
</div>
@Html.ValidationMessageFor(m => m.Email, "", new { @class = "text-danger" })
</div>
</div>
</div>
</div>

JsFiddle

最佳答案

尝试:

<div class="form-group">
<div class="row">
<div class="col-md-4 col-md-offset-4">
<div style="width: 280px">
<div class="input-group">
@Html.TextBoxFor(m => m.EMAIL, new { @class = "form-control", placeholder = "E-mail" })
@Html.ValidationMessageFor(m => m.EMAIL, "", new { @class = "text-danger" })
<span class="input-group-addon"><i class="glyphicon glyphicon-envelope"></i></span>
</div>
</div>
</div>
</div>
</div>

将宽度样式放在 div 而不是输入中 <div style="width: 280px"> ...输入字段... </div>

关于html - 中心 TextBoxFor 与列中的图标,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45867278/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com