CSS 搜索框不会向左浮动答案

【问题标题】：CSS Search box won't float leftCSS 搜索框不会向左浮动
【发布时间】：2012-04-25 22:24:31
【问题描述】：

我有这个

            <td width="312" valign="center" height="157" background="{{ 'BT_S3.png' | asset_url }}">
             <div style="width:95%; text-align: left; height:52px; background-image:url('{{ 'search_bar.png' | asset_url }}');" float="left">
            <form action="/search" method="get">
            <input type="text" name="q" src="{{ 'search_bar.png' | asset_url }}" />
            <input type="image" value="Search"  src="{{ 'search_button.png' | asset_url }}"  />
            </form>
            </div>
            </td>

这是我的搜索框的 HTML，位于 http://clarkbetty.myshopify.com/# 密码：betweu

我希望搜索按钮浮动，以便搜索框和按钮位于同一行。我尝试了很多东西，但没有任何效果。有人可以帮忙吗？

【问题讨论】：

我用的是chrome，它们在同一行

标签： html css shopify search-box

【解决方案1】：

您应该将style="float:left" 添加到文本框和按钮元素中。

<input type="text" [...] style="float:left" />
<input type="image" [...] style="float:left" />

还请注意，最好将这些规则放入 css 文件中，并通过它们的 id 或类来引用这些元素。

【讨论】：

【解决方案2】：

另一种方法是将相对定位应用于包装 form 元素，并在内部控件（搜索字段和按钮输入）上使用绝对定位来控制其内部布局。

类似的东西：

form {
    position: relative;
}
input[type='text'],
input[type='image'] {
    position: absolute;
    top: 0;
}
input[type='text'] {
    left: 0;
    width: 100%;
    padding-right: 20px;
}
input[type='image'] {
    right: 0;
    width: 20px;
}

【讨论】：

谢谢先生！你帮了大忙！
不客气。如果它解决了您的问题，请对有用的答案进行投票或将其标记为已接受，这是礼貌的做法。谢谢。

【解决方案3】：

改变这一行：

<input type="text" name="q" src="{{ 'search_bar.png' | asset_url }}" />

到这里：

<input type="text" style="float:left;" name="q" src="{{ 'search_bar.png' | asset_url }}" />

float:left 必须在 style 属性内。

【讨论】：

我这样做了，但没有任何改变。
哦，对不起，背景图片的名字骗了我。您必须将 style 属性添加到带有 input 的行。我正在编辑我的帖子。