html - 导航栏 - 搜索框 - 在调整浏览器大小时移动位置，我该如何解决这个问题？

Question

我是一名全新的 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>

Answer 1

首先，您的 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