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

我使用以下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>

目前我有以下布局问题；用户名将不在布局中，如下所示：-

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

---

谢谢

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

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

}

我们应该这样做

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

}