問題與CSS和樣式輸入標籤搜索欄

這裏的CSS代碼，我的工作：問題與CSS和樣式輸入標籤搜索欄

#navigation input#search_bar { 
     background: url(images/searchbar.png) no-repeat; 
     border: none; 
     height: 20px; 
     width: 156px; 
     margin: 0; 
     } 

    #navigation input#submit { 
     background: url(images/submit.png) no-repeat; 
     width: 30px; 
     height: 20px; 
     margin-left: -30px; 
     border: none; 
     }

HTML：

<div id="navigation"> 
    <ul> 
     <li><a href="#">home</a></li> 
     <li><a href="#">services</a></li> 
     <li><a href="#">about us</a></li> 
     <li><a href="#">portfolio</a></li> 
     <li><a href="#">contact us</a></li> 
    </ul> 

     <input id="search_bar" type="text" name="search_bar" /> 
     <input id="submit" type="submit" name="search_submit" value="" /> 
</div>

提交按鈕是從來沒有內嵌的搜索欄，但根據瀏覽器的不同，可能會高於或低於此值。

例子：

alt text http://img196.imageshack.us/img196/40/exampleq.png

這裏的兩個圖像我的工作：

alt text http://img402.imageshack.us/img402/7587/submit.png

alt text http://img138.imageshack.us/img138/6936/searchbarg.png

完整代碼：

HTML - http://pastebin.com/m53c47215

CSS - http://pastebin.com/m698b11f8

來源

2010-02-01 Andrew

這看起來像一個垂直對齊的問題。嘗試添加顯示：inline-block;到搜索字段和提交按鈕。

來源

2010-02-01 22:45:50 Travis

'display：inline-block;'沒有做任何事情，但是我添加了'vertical-align：middle;'並且在所有三個瀏覽器上都修復了它。謝謝。 – Andrew 2010-02-01 22:50:03

您可能會在position屬性中獲得更多成功，而不是保證金餘額。顧名思義，它是CSS中定位元素的首選方法。事實上，由於瀏覽器的不一致性，使用其他任何東西通常都會被忽略。

您需要將兩個輸入元素封裝在另一個元素中，以這種方式定位提交按鈕。我建議您使用form標籤，因爲它使您的HTML有效。

form { 
    position: relative; 
    } 

form input#submit { 
    position: absolute; 
    right: 0px; 
    top: 0px; 
    }

不用說（但我確實是這樣），你可以根據自己的喜好調整像素值。

來源

2010-02-01 22:47:08

也許Travis是正確的，如果不是，你也可以嘗試把你的保證金/填充值0 而不是陰性切緣，使用

position: relative; 
left:-30px

當然，你可以使用這個awesome frameworks that made my life easier and more relax about cross-browser css

來源

2010-02-01 22:52:15 Julien

添加vertical-align:middle;（或任何其他值），以兩個輸入：

#navigation input#search_bar { 
    background: url(images/searchbar.png) no-repeat; 
    border: none; 
    height: 20px; 
    width: 156px; 
    margin: 0; 
    vertical-align:middle; 
    } 

#navigation input#submit { 
    background: url(images/submit.png) no-repeat; 
    width: 30px; 
    height: 20px; 
    margin-left: -30px; 
    border: none; 
    vertical-align:middle; 
    }

http://jsbin.com/obumo/2/edit

來源

2010-02-01 22:54:33 Joel

問題與CSS和樣式輸入標籤搜索欄

回答

相關問題