如何在彼此之下显示登录用户名和搜索文本字段

Question

我有以下布局html来显示登录用户名和搜索输入文本： -

<section id="login" class="navbar-search pull-right">

<span class="username"><i class="icon-user"></i><strong> @User.Identity.Name.Substring(User.Identity.Name.IndexOf("\\") + 1)</strong></span>

<form  method="GET" action="@Url.Action("Search", "Home")">

<input  placeholder=".." name="searchTerm2" data-autocomplete-source= "@Url.Action("AutoComplete", "Home")" type="text"  /> 

</form>

</section>

和相关的css类： -

.navbar-search {
  position: relative;
  float: right;
  margin-top: 6px;
  margin-bottom: 0;
}

目前我遇到以下布局问题;是用户名将不在布局中，如下所示： -

所以我的问题是如何修改当前布局以在登录用户名下显示文本搜索字段，并将用户名设置在屏幕右侧。

由于

Answer 1

指定部分登录的宽度（足够大以包含输入搜索或显示名称），将带有用户名的范围显示为块并将其向右浮动。像这样的东西

#login{ width: 300px }
.navbar-search{width: 300px}
.username{
  display: block;
  float: right;

}

应该做的伎俩