CSS 显示文本框

Question

多亏了 James Donnelly，这个问题已经解决了。我的示例已更新为工作解决方案。

我的声誉不够高，所以我不能发布图片，所以我会尝试尽可能最好地描述它。我在表单上有 7 个文本框和一个文本区域，当我加载页面时，它当前在单独的行上加载每个文本框。

但是，我希望文本框像这样加载:
1 2 3
4 5 6 7
---8---(跨越)

我应该将每一行放在一个 div 中吗？我尝试将每个文本框 float 到左侧，但无法正常工作。如果这让事情变得更容易，我在我的元素中设置了 Twitter bootstrap。

这是我的工作代码:

<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>
}

Answer 1

.content-group 默认设置为 display:table;，这会强制您的每个输入都换行。您只需要将每个 .input-prepend 容器放入一个容器中即可:

    <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>