CSS显示文本框

多亏了詹姆斯·唐纳利，这个问题才得以解决。我的示例已更新为工作解决方案

我的声誉不够高，所以我不能发布图片，所以我会尽可能地描述它。我在一个表单上有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>
}

在系统中输入电影：
@使用（Html.BeginForm（））{
@TextBoxFor（m=>m.Title，新的{placeholder=“Title”}）
@Html.ValidationMessageFor（m=>m.Title）
@TextBoxFor（m=>m.Director，新的{placeholder=“Director”}）
@Html.ValidationMessageFor（m=>m.Director）
@*制作下拉列表*@
@TextBoxFor（m=>m.parentgreen，新的{placeholder=“green”}）
@Html.ValidationMessageFor（m=>m.parentGene）
@TextBoxFor（m=>m.Stars，新的{placeholder=“Actor”}）
@Html.ValidationMessageFor（m=>m.Stars）
@TextBoxFor（m=>m.Duration，新的{placeholder=“Duration（mins）”}）
@Html.ValidationMessageFor（m=>m.Duration）
@*制作下拉列表*@
@TextBoxFor（m=>m.Rating，新的{placeholder=“Rating”}）
@Html.ValidationMessageFor（m=>m.Rating）
@TextBoxFor（m=>m.releaseDate，new{placeholder=“Release Date”}）
@Html.ValidationMessageFor（m=>m.releaseDate）
@text区域（m=>m.Description，新的{placeholder=“Description”，@class=“input xxlarge”}）
@Html.ValidationMessageFor（m=>m.Description）

登记

@Html.ValidationSummary（）
}

这就是你的意思吗

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

。内容组默认设置为
显示：表格这是什么迫使你的每一个输入到一个新行。您只需将每个
.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>


@TextBoxFor（m=>m.parentgreen，新的{placeholder=“green”}）
@Html.ValidationMessageFor（m=>m.parentGene）
@TextBoxFor（m=>m.parentgreen，新的{placeholder=“green”}）
@Html.ValidationMessageFor（m=>m.parentGene）
@TextBoxFor（m=>m.parentgreen，新的{placeholder=“green”}）
@Html.ValidationMessageFor（m=>m.parentGene）
您必须发布您尝试过的css样式。但是我猜，如果给表单一个左、宽和高的浮点值，应该可以让您浮动输入字段，确保前六个输入中没有一个大于表单宽度的30%。最后一个宽度为100%
那么这有什么问题？你想让我做这个设置吗？它是空的。非常感谢你的小提琴。这就是我要找的。