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()。これにより、マークアップがすべて1行に表示されるため、絞り込まれた外観が表示されます。

私はおそらくいくつかのcssでそれを修正することができますが、なぜ私がこの動作を見ているのか誰かが知っているかどうか興味があります。何か案は？

4

2 に答える 2

3

HTML では、空白はすべて 1 つのスペースとして扱われます。例えば：

<div>TestTestTest</div>

各単語の間にスペースはありません。

<div>Test Test Test</div>

シングルスペースになります。

<div>Test     Test
Test</div>

2 番目の例と同じように見えます。

同じことが入力タグにも当てはまります。

<!-- 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 デモ。

さらに厄介なのは、一部のブラウザでは 2 つのタグTextElementの間に DOM が表示されることです。<input>例えば

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

この要素fooには 3 つの子要素 ​​(入力、テキスト要素、別の入力) があります。

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

2 つの子要素があります。以前、インデックスで子要素を参照しようとしていて、Chrome ではなく IE で動作していたときに、これは私を台無しにしました (上級者向けのヒント: 決してこれを行わないでください)。

CSS を使用して、要素をどのようにレイアウトするかを正確に指定する必要があることは正しいです。タグにクラスを割り当て、<form>そのクラス内の子要素のフロー方法、および各要素間の余白、パディング、および間隔を定義します。

于 2012-12-28T18:30:32.287 に答える
0

あなたの質問に答えるには、そうすべきではありません....しかし、どうやらそうです...そうです。最初に Firebug で両方のバージョンを確認し、そこにあるものを確認します。また、レイアウトで Doctype が定義されていることも確認してください。

于 2012-12-28T18:29:51.230 に答える