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

Question

我是asp.net mvc5的新手。 我试图将搜索图标放在搜索栏中，但它出现在搜索栏的外面。 谁能告诉解决方案？ 这是快照和代码。 在此处输入图片说明

代码在这里。

    <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输入组组件。 您可以在此处找到它的文档。

像这样：

<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>

这是一个演示 。

Answer 2

我认为您步入正轨，但您的问题分为两部分。 您可以使用.input-group-addon将搜索图标放置在搜索输入旁边。 然后，您可以使用css对其进行样式设置，使其看起来像是搜索栏的一部分。 随心所欲地设置样式。

这是一个工作示例 。