1

在尝试为 ASP.Net MVC 4 项目中的登录表单添加基本标记时，我看到了一些奇怪的行为。这是我有问题的cshtml文件的一部分：

<form class="navbar-form pull-right">
    <input type="text" placeholder="Email" class="span2" />
    <input type="password" placeholder="Password" class="span2" />
    <button class="btn" type="submit">Sign in</button>
</form>

该标记在我的主题中表现出色：

在此处输入图像描述

但是，如果我将其更改为：

<form class="navbar-form pull-right">
    <input type="text" placeholder="Email" class="span2" /><input type="password" placeholder="Password" class="span2" />
    <button class="btn" type="submit">Sign in</button>
</form>

它开始像这样渲染：

在此处输入图像描述

我注意到这一点是因为我试图从一个基础主题中获取一个简单的形式并用Html.BeginForm(). 这导致标记都在一条线上，所以我看到了那种压缩的外观。

我可能可以用一些 css 来纠正它，但我很好奇是否有人知道我为什么会看到这种行为。有任何想法吗？

4

2 回答 2

3

在 HTML 中，任何空白都被视为一个空格。例如：

<div>TestTestTest</div>

每个单词之间没有空格。

<div>Test Test Test</div>

将有一个空间。

<div>Test     Test
Test</div>

看起来与第二个示例相同。

这同样适用于输入标签：

<!-- No spacing -->
<div>
    <input /><input />
<div>

<!-- Line break converts to a space -->
<div>
    <input />
    <input />
<div>

<!-- Really big font -->
<div style="font-size: 120pt;">
    <input />
    <input />
<div>

JsFiddle 演示。

更糟糕的是，一些浏览器会TextElement在两个<input>标签之间的 DOM 中为您提供一个。例如

<div id="foo">
   <input />
   <input />
</div>

该元素foo将有 3 个子元素（一个输入、一个文本元素、另一个输入） - 其中：

<div id="foo"><input /><input /></div>

将有 2 个子元素。当我试图通过索引引用子元素并且它在 IE 而不是 Chrome 上工作时，这让我很困惑（专业提示：永远不要这样做）

你是正确的，你应该使用 CSS 来准确指定你想要元素的布局方式。为您的标签分配<form>一个类，并定义您希望该类中的子元素如何流动，以及每个元素之间的边距、填充和间距。

于 2012-12-28T18:30:32.287 回答
0

要回答你的问题，不应该......但显然它是......所以。我会首先在 Firebug 中检查这两个版本，看看你能在那里找到什么。还要检查您是否在布局中定义了 Doctype。

于 2012-12-28T18:29:51.230 回答