Question

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

我的导航栏有5个标签，与页面左侧对齐。然后在FAQ选项卡后面几个像素空间，然后文本框应该适合紫色导航栏。文本框，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>

Answer 1

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

所以我先修好了。

然后让它运作的最简单方法是放弃float:left并改为使用display:inline-block。

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

我也做了演示。

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

Answer 2

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

并获得真正的答案。抬头。这家伙说的是什么。

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

2 个答案: