html - 如何在 asp.net mvc5 中将图标放在输入标签内？

Question

我是 asp.net mvc5 的新手。我试图将搜索图标放在搜索栏内，但它出现在栏外。任何人都可以告诉解决方案吗？这是快照和代码。 enter image description here

代码在这里..

    <div class="banner-g">
        <div class="container">
            <div id="user-info">
                <div class="navbar-form navbar-right">
                    <form action="/home/browse" id="searchForm" method="get">

                        <div class="inner-addon left-addon">
                            <a href="#" id="submitSearch" style="text-decoration: none; right: 14px; color: rgb(204, 204, 204); top: 6px; "> <i class="glyphicon glyphicon-search"></i></a>
                            <input class="form-control input-sm" data-val="true" data-val-length="The field Search must be a string with a maximum length of 150." data-val-length-max="150" data-val-regex="Please only use letters, numbers, spaces, periods, commas, question/ exclamation marks, dollar sign, underscores, hyphens, apostrophes, parentheses, forward and back slashes, colon and semi colons" data-val-regex-pattern="^[0-9a-zA-Z/&#39;() .,!?$:-;_-]+$" id="Search" name="Search" placeholder="Search Markets" type="text" value="" />
                            &nbsp;

                            <input type="hidden" name="isSearch" value="true">
                        </div>

                    </form>

                </div>
            </div>
        </div>
    </div>

在引导文件中

.glyphicon {
  position: relative;
  top: 1px;
  display: inline-block;
  font-family: 'Glyphicons Halflings';
  -webkit-font-smoothing: antialiased;
  font-style: normal;
  font-weight: normal;
  line-height: 1;
}

我将感谢您的帮助。

Answer 1

您应该考虑使用 Bootstrap 输入组组件。您可以在文档中找到它 here .

像这样:

<div class="input-group">  
  <input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
  <span class="input-group-addon glyphicon glyphicon-search" aria-hidden="true"></span>
</div>

这是一个demo .