造型搜索欄和沒有間隙的去按鈕

有沒有辦法讓搜索欄和去按鈕完全接觸？我正在嘗試創建一些搜索欄和去按鈕。造型搜索欄和沒有間隙的去按鈕

這裏是我的代碼：

/*SEARCH*/ 
form#searchform input{background-color:rgba(128, 129, 132, 0.4); margin-bottom: 10px; border:medium none; font-size:12px; padding:10px; width:173px;} 

form#searchform input#s{ 
width: 150px; 
font-family: Helvetica, Arial, Sans-serif; font-size: 12px; font-weight: bold; color: #868686; 
border-bottom: 1px #868686 solid; 
padding:10px; 
} 

form#searchform input#btn 
{width: 23px; 
font-family: Helvetica, Arial, Sans-serif; font-size: 12px; font-weight: bold; color:#00ADEE;} 

<!-- START SEARCH --> 

      <form id="searchform" method="get" action="<?php echo $_SERVER['PHP_SELF']; ?>"> 
      <div> 
      <input type="text" value="Search" onfocus="if (this.value == 'Search') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Search';}" name="s" id="s" /> 
      <input name="go" type="submit" value=">" id="btn" /> 
      </div> 
      </form> 

    <!-- END SEARCH -->

目前在這兩個之間小的差距，我無法找出原因。我也想填充搜索框的邊框底部，並且#s類的填充也不起作用。任何幫助表示讚賞！

來源

2011-08-31 Amy

你的問題是你的文本字段和你的按鈕之間有空格，下面的問題解決了這個問題。

<form id="searchform" method="get" action="<?php echo $_SERVER['PHP_SELF']; ?>"> 
    <div> 
    <input type="text" value="Search" onfocus="if (this.value == 'Search') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Search';}" name="s" id="s" /><input name="go" type="submit" value=">" id="btn" /> 
    </div> 
</form>

編輯：喜歡這個http://jsfiddle.net/N2PVu/

編輯2：或form#searchform input#s, form#searchform input#btn{float:left;}

來源

2011-08-31 11:54:01 twe4ked

歡呼聲，因爲我想的第一個工作：DI唐假設你對邊界填充問題有任何想法嗎？ – Amy

嘗試'form＃searchform input＃btn {border-bottom：1px＃868686 solid;}':-D – twe4ked

不，我不想在btn上的邊框底部，只是在搜索區域，但我想填充它在邊界下面。但由於某種原因它不起作用。 – Amy

嘗試使用這樣的：

form#searchform input#s{ float:left }

來源

2011-08-31 11:54:43 makregistr

造型搜索欄和沒有間隙的去按鈕

回答

相關問題