3

我正在使用 MVC 和引导程序来创建一个网站，并且大部分时间都在尝试使用它并发现以下内容：

在导航栏中创建内联表单时，我注意到输入元素之间的间距不正确。我想我发现这是由 Razor 引擎生成的标记引起的，它们彼此相邻呈现的元素之间没有空白，没有任何间距。但我不确定如何解决它。

这是无效行为的jsfiddle。

剃刀

@using (Html.BeginForm("JsonLogin", "Account", FormMethod.Post, new { @class = "navbar-form" }))
{
    @Html.TextBoxFor(m => m.UserName, new { @class = "input-small", placeholder = @Html.DisplayNameFor(m => m.UserName) })
    @Html.PasswordFor(m => m.Password, new { @class = "input-small", placeholder = @Html.DisplayNameFor(m => m.Password) })
}

html

<form class="navbar-form">
    <input type="text" class="input-small" placeholder="Email"><input type="password"  class="input-small" placeholder="Password">
</form>

这是有效行为的jsfiddle。

html

<form class="navbar-form">
    <input type="text" class="input-small" placeholder="Email">
    <input type="password" class="input-small" placeholder="Password">
</form>

关于如何解决这个问题的任何想法？我猜我在引导程序中遗漏了一些东西。​</p>

4

2 回答 2

3

据我所知，只有当输入元素是表单元素的直接子元素时，才会出现这种行为。

尝试

@using (Html.BeginForm("JsonLogin", "Account", FormMethod.Post, new { @class = "navbar-form" }))
{
<div>
    @Html.TextBoxFor(m => m.UserName, new { @class = "input-small", placeholder = @Html.DisplayNameFor(m => m.UserName) })
    @Html.PasswordFor(m => m.Password, new { @class = "input-small", placeholder = @Html.DisplayNameFor(m => m.Password) })
</div>
}

并且您应该在输入元素之间获得空格。

于 2012-04-16T23:21:09.357 回答
0

文本框上没有左边距或右边距，因此当输入元素之间没有空白时，它们应该彼此相邻。如果有空格，inline-block 元素将在元素之间呈现 4px 的边距。

要解决此问题，您可以将元素放在同一行且没有空格，或者将两个元素浮动到左侧。

于 2012-04-16T22:20:35.327 回答