Question

我正在尝试在选择框下方放置一个链接按钮，但到目前为止没有成功。链接按钮始终从选择框开始。

下面你可以看到

 <div class="field">
 <select id="@("Select" +item.Name)" name="@("Select" +item.Name)"></select>  
 </div>
 <div class="removed">  
 <a href="#" class="remove">Remove</a>
 </div>

在css我只有：

.field {
    margin: 0.5em 0 0 0;
}

您认为我应如何处理此按钮，以便按钮位于选择框下方。提前谢谢，LAziale

更新：附上截图 screenshot

HTML：

 <div id="accordion">

            @foreach (var item in Model.Parameters)
            {
                <h3><a href="#">@Html.LabelFor(m => item.Name, item.Prompt)</a></h3>
                <div>
                    <div class="label">
                        Search @*Html.TextBox("Search")*@ 
                        <input id="@("Search" + item.Name)" type="text" name="q" data-autocomplete="@Url.Action("QuickSearch/" + item.Name, "Report")" />
                    </div>

                    <div class="field">
                        <select multiple id="@("Select" +item.Name)" name="@("Select" +item.Name)"></select>  

                    </div>
                    <div class="removed">  
                     <a href="#" class="remove">Remove selection</a>
                    </div>  

                </div>
            }         
        </div>

CSS：

.display-label, 
.label {
    margin: 1em 0 0 0;
}

.display-field, 
.field {
    margin: 0.5em 0 0 0;
}

.text-box {
    width: 30em;
}

.text-box.multi-line {
    height: 6.5em;
}

.tri-state {
    width: 6em;
}

Answer 1

您是否在选择框下方检查了链接的代码。

正如您在此处所见：http://jsfiddle.net/ninadajnikar/ZtNcx/

或者你想在这里做些不同的事情吗？

Answer 2

您是否尝试过使用clearfix？如果没有那么试试这个

<div id="accordion">

            @foreach (var item in Model.Parameters)
            {
                <h3><a href="#">@Html.LabelFor(m => item.Name, item.Prompt)</a></h3>
                <div>
                    <div class="label">
                        Search @*Html.TextBox("Search")*@ 
                        <input id="@("Search" + item.Name)" type="text" name="q" data-autocomplete="@Url.Action("QuickSearch/" + item.Name, "Report")" />
                    </div>

                    <div class="field">
                        <select multiple id="@("Select" +item.Name)" name="@("Select" +item.Name)"></select>  

                    </div>
                    <div class="CL"></div>   //Here is the change
                    <div class="removed">  
                     <a href="#" class="remove">Remove selection</a>
                    </div>  

                </div>
            }         
        </div>

CSS：

.CL{ clear:both}

选择框下方的对齐链接按钮

2 个答案: