0

James Donnelly のおかげで、これは解決されました。私の例は、実用的なソリューションに更新されました。

私の評判は十分に高くないので、画像を投稿することはできません. フォームに 7 つのテキスト ボックスとテキスト領域があり、ページを読み込むと、現在、各テキスト ボックスが別々の行に読み込まれます。

ただし、テキストボックスを次のようにロードしたい:
1 2 3
4 5 6 7
---8--- (スパン全体)

各行を div 内に配置する必要がありますか? 各テキストボックスを左に浮かせてみましたが、正しく動作しません。作業が簡単になる場合は、プロジェクトに Twitter ブートストラップをセットアップします。

ここに私の作業コードがあります:

<div class="well">
<h4>Enter Movie in System:</h4>

@using (Html.BeginForm()) {
    <div>
        <div class="input-prepend">
            <span class="add-on"><i class="icon-film"></i></span>
            @Html.TextBoxFor(m => m.Title, new { placeholder = "Title" })
            @Html.ValidationMessageFor(m => m.Title)
        </div>

        <div class="input-prepend">
            <span class="add-on"><i class="icon-facetime-video"></i></span>
            @Html.TextBoxFor(m => m.Director, new { placeholder = "Director" })
            @Html.ValidationMessageFor(m => m.Director)
        </div>

        @* Make dropdown *@
        <div class="input-prepend">
            <span class="add-on"><i class="icon-tags"></i></span>
            @Html.TextBoxFor(m => m.parentGenre, new { placeholder = "Genre" })
            @Html.ValidationMessageFor(m => m.parentGenre)
        </div>  


        <div class="input-prepend">
            <span class="add-on"><i class="icon-star-empty"></i></span>
            @Html.TextBoxFor(m => m.Stars, new { placeholder = "Actor" })
            @Html.ValidationMessageFor(m => m.Stars)
        </div>



        <div class="input-prepend">
            <span class="add-on"><i class="icon-time"></i></span>
            @Html.TextBoxFor(m => m.Duration, new { placeholder = "Duration (mins)" })
            @Html.ValidationMessageFor(m => m.Duration)
        </div>


    @* Make dropdown *@

        <div class="input-prepend">
            <span class="add-on"><i class="icon-warning-sign"></i></span>
            @Html.TextBoxFor(m => m.Rating, new { placeholder = "Rating" })
            @Html.ValidationMessageFor(m => m.Rating)
        </div>



        <div class="input-prepend">
            <span class="add-on"><i class="icon-calendar"></i></span>
            @Html.TextBoxFor(m => m.releaseDate, new { placeholder = "Release Date" })
            @Html.ValidationMessageFor(m => m.releaseDate)
        </div>


    <div class="control-group">
        <div class="input-prepend">
            <span class="add-on"><i class="icon-comment"></i></span>
            @Html.TextAreaFor(m => m.Description, new { placeholder = "Description", @class="input-xxlarge" })
            @Html.ValidationMessageFor(m => m.Description)
        </div>
    </div>



        <p>
            <button class="btn" type="submit" value="Register">Register</button>
        </p>
        @Html.ValidationSummary()
    </div>
}

4

3 に答える 3

1

.content-groupデフォルトdisplay:table;では、各入力を新しい行に強制するものに設定されています。各.input-prependコンテナを 1 つのコンテナに入れるだけです。

    <div>
        <div class="input-prepend">
            <span class="add-on"><i class="icon-tags"></i></span>
            @Html.TextBoxFor(m => m.parentGenre, new { placeholder = "Genre" })
            @Html.ValidationMessageFor(m => m.parentGenre)
        </div>  

        <div class="input-prepend">
            <span class="add-on"><i class="icon-tags"></i></span>
            @Html.TextBoxFor(m => m.parentGenre, new { placeholder = "Genre" })
            @Html.ValidationMessageFor(m => m.parentGenre)
        </div> 

        <div class="input-prepend">
            <span class="add-on"><i class="icon-tags"></i></span>
            @Html.TextBoxFor(m => m.parentGenre, new { placeholder = "Genre" })
            @Html.ValidationMessageFor(m => m.parentGenre)
        </div> 
    </div>
于 2013-03-17T21:42:20.410 に答える
0

試したcssスタイルを投稿する必要があります。しかし、フォームに左にフロート、幅と高さを与えると、入力フィールドをフロートできるようになるはずです。最初の6つの入力のいずれもフォーム幅の30％を超えないようにしてください。最後の1つの幅は100％

于 2013-03-17T21:43:31.110 に答える
0

これはどういう意味ですか？

<div>
   <input id="tbx1" />
   <input id="tbx2" />
   <input id="tbx3" /><br />   
   <input id="tbx4" />
   <input id="tbx5" />
   <input id="tbx6" />
   <input id="tbx7" />
   <span id="span1" style="padding-left:200px">
      <input id="tbx8" />
   </span>
</div>
于 2013-03-17T21:41:16.837 に答える