导航栏 - 搜索框 - 调整浏览器大小时移动位置，我该如何解决？答案

【问题标题】：Navigation Bar - Search box - moves position when resize browser, how can I fix this?导航栏 - 搜索框 - 调整浏览器大小时移动位置，我该如何解决？
【发布时间】：2013-10-14 11:19:21
【问题描述】：

我是一个全新的 CSS 程序员。我正在尝试创建一个适合我网站每个页面顶部导航栏的文本搜索框。

我的导航栏有 5 个与页面左侧对齐的标签。然后在 FAQ 选项卡几个像素空间之后，文本框应该正好适合紫色导航栏。文本框、提交按钮和高级链接。我如何让这个顶部发生。

当我调整 Firefox 23.01 浏览器窗口的大小时，文本框移出导航栏，并在导航栏下方落入黄色正文内容区域。 .

我知道这可能是一个非常明显的菜鸟举动，但我很新。任何帮助都会很棒。我已经为此工作了好几个小时。！

这是css代码。

<style>

html    {background: yellow;
     width: 100%;}


 nav {  background: blue;
height: 2.3em;
width: 100%;
}

ul, li  {
    margin: 0;
    padding: 0;
    list-style: none;
    float: left;
        font-size: 1.040em;}


ul  {
    background: purple;
    height: 2em;
    width: 100%;}

li a    {
    display: block;
    line-height: 2em;
    padding: 0 1.2em;
    color: white;
    text-decoration: none;   }

li a:hover  {
    background:blue;
    height: 2em;
    padding-top: .3em;
    position: relative;
    text-decoration: underline;   
    top: -.3em;
    border-radius: .3em .3em 0 0 }

.current, a:hover.current{  
    background: blue;
    color: #eee;
    padding-top: .3em;
    position: relative;
    top: -.3em;
    border-radius: .3em .3em 0 0;
    border-bottom: .3em solid blue;
    cursor: default;}


.button {
    background: blue;
    color: white;
    padding: 0 1em;
    height: 2.4em;
    display: table;
    border: 1px solid rgb(32, 124, 202);
    font-family: Helvetica, Times New Roman;
    font-weight: 100;
    font-size: .85em;       
    letter-spacing: .045em;
    line-height: 2.4em;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    border-radius: .325em;
    -webkit-box-shadow: inset 0px 1px 3px rgb(162,200,229);
    box-shadow: inset 0px 1px 3px rgb(162,200,229);
    background: rgb(30,87,153); }   </style>

这里是html

<nav > 

<ul class="nav">
    <li> <A href="../index.cfm" title= "Home" Class="current">Home</A></li>
    <li> <A href="../ar.cfm" title = "Sell Here">Sell it</A></li>
    <li> <A href="../aboutus.cfm" title = "About Us">About Us</A></li>
    <li> <A href="../rlist.cfm" title = "A List">A List</A></li>
    <li> <A href="../faq.cfm" title = "FAQ">FAQ</A></li>

 <form>

<li><div id="searchbox">

<input type="text" value="search word here.." style="font-size: 14pt" name="searchbox" size ="36em" onfocus="setValue(this)" onblur="setValue(this)"/></div></li>

<li> <div id="button">
             <input type="submit" value="Find!">

<li><div id="signin">
    <A href="search.cfm">Advanced</a></li>

</form></div></li>

【问题讨论】：

标签： html css header navigation nav

【解决方案1】：

我建议使用 .css 文件而不是添加到 HTML。

以及真正的答案。抬头。那家伙怎么说的。

【讨论】：

【解决方案2】：

首先，您的 html 无效，您不应在 li 之间声明 form 或 div。

所以我先解决了这个问题。

那么让它工作的最简单方法是删除float:left 并改用display:inline-block。

如果您想在调整大小时始终看到所有内容，请保留ul{width:100%}。否则，如果您希望导航栏始终位于一行，请使用ul {width:100%, min-width:1000px}（这里，1000px 应该是一个固定长度，由您想要的位置决定）。

我也做了演示。

100% width nav bar
1000px min-width nav bar

【讨论】：