提交按鈕不合作

我相信這是我的一個完整的監督，但我有一個按鈕，我想一個輸入框的直接權利，我的HTML是：提交按鈕不合作

<input type="text" name="q" id="search" /> 
    <input type="submit" name="submit" id="submit" value="Go!" />

和css是：

#main input { 
     margin: 30px auto auto 130px ; 
     positiom: absolute; 
     font-size: 18px; 
     background: #fff; 
     border: 3px; 
     padding: 6px; 
     z-index: 3; 
     } 
    #search { 
     float: left; 
     width: 550px; 

    } 
    #submit { 
     width: 60px; 
    } 
    #submit::-moz-focus-inner { 
     border: 0; 
     padding: 0; 
    }

The Go！按鈕直接位於提交框左側的下方，任何類型的邊距調整都是徒勞的，它只是停留在那裏。還嘗試使位置絕對和按鈕重疊。

The Go！按鈕將無法正確定位 - 它應該位於我的輸入框的右側，但它會掛在它下面。

我怎樣才能讓它直接定位到我的輸入框？

感謝您的幫助！

編輯：

html{ 
    background: url(images/bg5.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
} 
#main{ 
    width: 875px; 
    height: 350px; 
    background: url(images/form3.png) 0 0 no-repeat; 
    margin:250px auto; 
    z-index: 1; 
    } 

#main form { 
    width: 850px; 
    height: 191px; 
    background: url(images/logo3.png) 0 0 no-repeat; 
    margin: -165px auto auto -90px; 
    position: absolute; 
    z-index: 2; 
    } 
#text { 
    font-size: 30px; 
    color: #ffffff; 
    font-family: parisjetaime; 
    margin: 189px auto auto 130px ; 
    line-height: 30px; 

} 
#main input { 
    margin: 30px auto auto 130px ; 

    font-size: 18px; 
    background: #fff; 
    border: 3px; 
    padding: 6px; 
    z-index: 3; 
} 
#search { 
    width: 550px; 
} 
#submit { 
     width: 60px; 
    float: right;  
} 
#submit::-moz-focus-inner { 
    border: 0; 
    padding: 0; 
}

來源

2011-04-06 Sapp

從描述中不清楚實際問題是什麼。 – Oded 2011-04-06 21:23:25

抱歉 - 去！按鈕將無法正確定位 - 它應該位於我的輸入框的右側，但它會掛在它下面。 – Sapp 2011-04-06 21:27:17

看起來你已經有了答案，但是請注意，你在#main輸入下拼寫錯誤的「位置」 - 這可能不會幫助任何東西;） – kjl 2011-04-06 21:30:27

不知道這是你的問題，但似乎採取了從#submit轉到margin: 130px auto auto 200px ;！按鈕正確放置在搜索框的右側。

演示： http://jsfiddle.net/3ykRD/

編輯

解決方案：http://jsfiddle.net/H3gYM/1/

的#main input性能進行了重寫#submit特性 - 在這種情況下，利潤率是什麼讓去！按鈕被移動。放置!important取消覆蓋，然後調整邊距可解決問題。

來源

2011-04-06 21:27:33 quarkdown27

嗯，即使取出邊距仍然使按鈕保持在同一位置=/ – Sapp 2011-04-06 21:36:40

您還應該從#search中刪除float：left。這將有助於使文本欄更好一些，我不確定是否真的需要它。 – 2011-04-06 21:40:55

hmm，仍然懸掛在輸入欄下方 - 用我的其他風格編輯。 – Sapp 2011-04-06 21:46:07

爲什麼絕對放置您的輸入？這是一個稍微修剪下來的代碼，它們將使它們彼此相鄰。該float:left是引起高度DIS-聯合，因爲它會導致兩種元素不再是在同一個「行」

#main input { 
    font-size: 18px; 
    background: #fff; 
    border: 3px; 
    padding: 6px; 
    z-index: 3; 
    } 
#search { 
    width: 550px; 
} 
#submit { 
    width: 60px; 
} 
#submit::-moz-focus-inner { 
    border: 0; 
    padding: 0; 
}

來源

2011-04-06 21:35:49 smdrager

嗯，仍然掛在輸入欄下方 - 用我的其餘樣式編輯。 – Sapp 2011-04-06 21:44:35

我想你想要的是恰到好處放置按鈕，文本框，右側？如果是這樣你需要浮動輸入按鈕和文本框左側;

#textbox { 
float: left; 
} 


#submit { 
    width: 60px; 
    float: left;

}

這總是爲我工作:)讓我知道它的工作！

來源

2011-04-06 22:15:48 Sisir

提交按鈕不合作

回答

相關問題