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

我是一个全新的CSS程序员。我正在尝试创建一个文本搜索框，该框位于我网站上每个页面顶部的导航栏内。导航栏 - 搜索框 - 调整浏览器大小时移动位置，我该如何解决这个问题？

我的导航栏中有5个选项卡，对齐到页面左侧。然后立即在常见问题选项卡的几个像素空间后，文本框应该适合在紫色导航栏中。文本框，SUBMIT按钮和ADVANCED链接。如何让这个顶部发生。

当我调整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>

来源

2013-10-07 Jeff F.

首先，你的HTML是无效的，你不应该有form或divli的之间声明。

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

那么最简单的办法把它的工作是删除float:left，并使用display:inline-block代替。

，如果你想经常看到，即使你调整了一切，保持ul{width:100%}。否则，如果您希望导航栏始终位于同一行上，请使用ul {width:100%, min-width:1000px}（这里，1000px应该是固定的长度，取决于您想要的位置）。

我也做过演示。

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

来源

2013-10-07 19:37:19 Kraz

-1

我建议使用.css文件，而不是加入HTML。

和真正的答案。抬头。那家伙说了什么。

来源

2014-11-07 13:01:49

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

回答

相关问题