CSS中搜索按钮的干净定位答案

【问题标题】：Clean positioning of Search button in CSSCSS中搜索按钮的干净定位
【发布时间】：2015-12-24 10:56:59
【问题描述】：

鉴于以下示例，将“搜索”按钮与日期输入控件对齐的好方法是什么？

我用 Bootstrap（2 行，3 列）试了一下，但布局应该靠左，并将 3 个逻辑列保持在一起。也许我忽略了一个更简单的解决方案。

JS Bin HTML

注意：基于 Telerik 的 Kendo UI 结合 ASP.NET MVC 的简化输出。

【问题讨论】：

这个问题要么过于宽泛，要么基于观点，要么需要讨论，因此与 Stack Overflow 无关。如果您有具体的、可回答的编程问题，请提供完整的详细信息。
感谢您的反馈。尽管如此，我还是从以下答案中的不同方法中学到了。

标签： css twitter-bootstrap kendo-ui kendo-asp.net-mvc

【解决方案1】：

Flexbox 需要 IE10+

这是适用于任何地方的解决方案，不会破坏引导程序的响应能力http://output.jsbin.com/ladezahija/1/

想法是应用于元素（带有日期和搜索按钮的块）下一条规则：

.element {
    display: inline-block;
    vertical-align: bottom;
}

在一个示例中，我必须使用 float: none 重新定义以前通过引导添加的属性。

还要确保为您处理的容器和内部元素添加一个单独的类。

【讨论】：

【解决方案2】：

我会选择 CSS Flex。

使用此 CSS 会为您对齐它们。（您将需要一些供应商前缀）

$("#datepicker").kendoDatePicker();
$("#grid").kendoGrid({
  dataSource: [
    { foo: "foo", bar: "bar" }
  ]
});

.container-fluid {
    display: flex;
    justify-content: space-around;
}
.container-fluid > div {
    align-self: flex-end;
}

<link href="http://cdn.kendostatic.com/2013.2.716/styles/kendo.common.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2013.2.716/styles/kendo.bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2013.2.716/styles/kendo.mobile.all.min.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2013.2.716/js/kendo.all.min.js"></script>

  <div class="container-fluid">

    <div style="margin: 20px; float: left;">
        <h4>
            <label for="StartDate">From</label>
        </h4>
        <span class="k-widget k-datepicker k-header">
            <span class="k-picker-wrap k-state-default">
                <input name="startDate" class="k-input" id="startDate" role="combobox" aria-disabled="false" aria-expanded="false" aria-readonly="false" aria-owns="startDate_dateview" style="width: 100%;" type="text" value="1-11-2015" data-val="true" data-role="datepicker" />
                <span class="k-select" role="button"  unselectable="on">
                    <span class="k-icon k-i-calendar" unselectable="on">select</span>
                </span>
            </span>
        </span>
    </div>

    <div style="margin: 20px; float: left;">
        <h4>
            <label for="EndDate">To</label>
        </h4>
        <span class="k-widget k-datepicker k-header">
            <span class="k-picker-wrap k-state-default">
                <input name="endDate" class="k-input" id="endDate" role="combobox" aria-disabled="false" aria-expanded="false" aria-readonly="false" aria-owns="endDate_dateview" style="width: 100%;" type="text" value="24-12-2015" data-val="true" data-role="datepicker" />
                <span class="k-select" role="button"  unselectable="on">
                    <span class="k-icon k-i-calendar" unselectable="on">select</span>
                </span>
            </span>
        </span>            
    </div>

    <div style="margin: 20px; float: left;">
        <button tabindex="0" class="k-button" id="applyFilters" role="button" aria-disabled="false" data-role="button">Search</button>
    </div>

</div>

【讨论】：

【解决方案3】：

您没有正确使用引导程序。无论如何，我有两个解决方案。

第一个解决方案：=> 在最后一个 div 中添加一个空白 h4 <h4>&nbsp;</h4>。

第二种解决方案：=> 使用margin-top:60px 到k-button。

【讨论】：