Question

我有以下HTML：

        <div class="onerow">
            Site ID: <input type="text" name="siteId" id="siteId" class="k-textbox" data-bind="value: siteId"/>&nbsp;
        </div>
        <div class="onerow">
            <div id="select">
                <label for="state">View:</label>&nbsp;&nbsp;&nbsp;
                    <select id="state" data-role="dropdownlist" data-bind="value: state" data-option-label="Select State">
                        <option value="2">All</option>
                        <option value="1">Active</option>
                        <option value="3">All except deleted</option>
                    </select>
                    <input type="button" id="buttonsearch" value="Search" class="k-button" data-bind="events: {click: onSearchClick}"/>
            </div>
        </div>

或者，在jsFiddle中：http://jsfiddle.net/j7ksuv9y/

我想将这两个人一个接一个地放在同一行上。我尝试使用style="float: right"，但最终只将第二个输入框放在屏幕的最右侧，这不是我想要的。

我怎么能做到这一点？

Answer 1

添加以下css：

.onerow {
    display: inline-block;
}

这将使元素显示为内联，但也显示为块。

引用来自   MDN

该元素生成一个将与其一起流动的块元素框   周围的内容就像它是一个单行内联框（行为很多   就像被替换的元素一样）

Updated Fiddle

Answer 2

只需更新CSS，如下所示：

.onerow{
    display:inline-block;
}

Fiddle Demo

Answer 3

有两种方法可以实现： -

1）上面已经提到的一个选项是将css设置为外部div的类作为display：inline，如上所述

2）

<div class="onerow">
            <label class="lbl">Site ID: </label>
<input type="text" name="siteId" id="siteId" class="k-textbox" data-bind="value: siteId"/>&nbsp;
<div class="clear" style="clear:both;"></div>
</div>

是通过添加以下css： -

.lbl, .k-textbox
    {float:left}

在此明确两者都提到它也支持IE。这将适用于所有浏览器并根据需要提供输出。

Answer 4

在你的行div上使用display:inline-block

Answer 5

你可以试试这个：

Demo

<div class="onerow">
            Site ID: <input type="text" name="siteId" id="siteId" class="k-textbox" data-bind="value: siteId"/>&nbsp;


                <label for="state">View:</label>&nbsp;&nbsp;&nbsp;
                    <select id="state" data-role="dropdownlist" data-bind="value: state" data-option-label="Select State">
                        <option value="2">All</option>
                        <option value="1">Active</option>
                        <option value="3">All except deleted</option>
                    </select>
                    <input type="button" id="buttonsearch" value="Search" class="k-button" data-bind="events: {click: onSearchClick}"/>

        </div>

将两个输入框和div放在同一行上

5 个答案: