導航欄 - 搜索框 - 調整瀏覽器大小時移動位置，我該如何解決這個問題？

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

導航欄 - 搜索框 - 調整瀏覽器大小時移動位置，我該如何解決這個問題？

回答

相關問題