CSS 中搜索按钮的清晰定位

Question

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

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

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

Answer 1

我会选择 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>

Answer 2

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

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

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

Answer 3

Flexbox 需要 IE10+

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

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

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

在一个示例中，我不得不使用 float: none 重新定义之前由 bootstrap 添加的属性。

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

CSS 中搜索按钮的清晰定位

Clean positioning of Search button in CSS

css

twitter-bootstrap

kendo-ui

kendo-asp.net-mvc