Question

我正在http://www.bkd.com/new-test-2.htm

的新主页上工作

我们有一个搜索栏，以前由不再在这里的其他开发人员构建。

我正在尝试将搜索栏设置在屏幕右侧，但仍然具有响应性。我不确定我做错了什么。我尝试了很多不同的东西，当我使浏览器变小时，它只是跳到导航下方。这是我不想发生的事情。

这是整个浅灰色条的编码：

<div class="clear"></div>
<div class="span-8"> 
    <a class="left"  style="padding: 0px 0px 0px 0px; margin-left: 80px;" href="/">
    <img src="/images/common/header/logo.png"  border="0"></a> </div>
    <div style="margin-top:25px;" class="span-0 last">
    <form action="/search/">
        <input type="image" src="/images/common/search/search-icon-new.png" style="margin-left: 220px; float:left; outline:none" alt="Search">
        <input type="text" name="zoom_query" value="Search" style=" background-   image:url(/images/common/search/search-field-new.png); background-repeat: repeat-x; margin: 0; line-height:26px; height: 26px; width:200px; color:#666; background-color:#fff; border:none; outline:hidden; border-radius: 7px; float:right; padding: 0px 0px 0 10px; margin-left: 0px;" onFocus="this.value=this.value.replace(/^Search$/, '')">
    </form>
</div>

任何人都可以告诉我我做错了什么或更好地实现我想要做的事情。如果我需要提供更多信息，请告诉我。

提前谢谢！ -Marcy -

Answer 1

搜索栏正在分解，因为它旁边的标记图标有一个不必要的220px边距，整个搜索div的宽度为462px，导致它在较小的屏幕尺寸上分解。更改以下内容

<input type="image" src="/images/common/search/search-icon-new.png" style="margin-left: 220px; float:left; outline:none" alt="Search">

到

<input type="image" src="/images/common/search/search-icon-new.png" style=" float:left; outline:none" alt="Search">

将搜索栏向右移动，将float:right应用于容器div，如下所示：

<div style="margin-top:25px; float:right" class="span-0 last">

我建议使用外部样式表而不是应用内联样式，外部样式表可能会被缓存，因此连续访问时加载可能会变快。它也使你的HTML更具可读性。

使搜索栏响应

1 个答案: