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

我是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;
}

我将感谢您的帮助。

最佳答案

您应该研究使用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。

关于html - 如何在asp.net mvc5中的输入标签中放置图标？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/40662206/