1

我有以下布局 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;
}

目前我有以下布局问题；是用户名将不在布局中，如下所示：- 在此处输入图像描述

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

谢谢

4

1 回答 1

0

为您的部分登录指定宽度（足够大以包含输入搜索或显示名称），将您的跨度与用户名显示作为一个块并将其浮动。像这样的东西

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

}

应该做的伎俩

于 2013-11-11T12:16:55.533 回答