0

I'm a brand new css programmer. I am trying to create a text search box that fits inside my Navigation bar on the top of every page on my site.

My nav bar has 5 tabs that align to the left of the page. then immediately after the FAQ tab a few pixel space then the text box should fit right in the purple nav bar. The text box, SUBMIT button and ADVANCED link. how to I get this top happen.

When I resize the Firefox 23.01 browser window, the text box moves out of the navigation bar, and drops under the nav bar into the yellow body content area. .

I know this may be a real obvious rookie move but I am very new. Any help would be great. I've been working on this for hours.!

here is the css code.

<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>

here is the 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>

4

2 回答 2

2

首先，你的 html 是无效的，你不应该在's之间有formordiv声明。li

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

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

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

我也做了演示。

100% 宽度导航栏
1000px 最小宽度导航栏

于 2013-10-07T19:37:19.300 回答
-1

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

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

于 2014-11-07T13:01:49.237 回答