Question

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

并且代码在这里..

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

并在bootstrap文件中

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

Answer 2

我认为你走在正确的轨道上，但你的问题是两个问题。您可以使用.input-group-addon将搜索图标放在搜索输入旁边。然后你可以使用CSS来设置它的样式，看起来它是搜索栏的一部分。无论你的心愿如何，都要设计它。

这是一个有效的demo。

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

2 个答案: