क्रोम फ्लोट: सही छवि संरेखित नहीं है

मेरे पास यह खोज बटन है जो वास्तव में मुझे कठिन समय दे रहा है। मैं इसे खोज इनपुट क्षेत्र के साथ ठीक से लाइन करने की कोशिश कर रहा हूं और जब मुझे अंत में फ़ायरफ़ॉक्स में काम करने के लिए मिला, तो उसने क्रोम में सभी अजीब होने का फैसला किया। क्रोम में देखे जाने पर बटन की तरह कुछ दबा रहा है।

यहां मेरा HTML है:

<div id="searchCon">    
<form role="search" method="get" id="searchform" class="searchform" action="http://somesite.com/">
<div>

<input type="text" value="" name="s" id="s">
<input type="image" value="Search" src="button.png" id="searchsubmit" style="opacity: 1; float: right;">
</div>
</form>
</div>

मेरा सीएसएस यहाँ है:

    #searchCon {
  float: right;
  display: inline-block;
  height:37px;
  padding: 0px 10px 10px 280px;
  color:#2a2a2a;

}

मैं कई फ़ोरम, लेख इत्यादि पढ़ रहा हूं और क्रोम में ठीक से काम करने के लिए यह छोटा बटन नहीं प्राप्त कर सकता हूं।

कृपया मेरी मदद करें!

0

1 उत्तर

इसे इस्तेमाल करे:

HTML:

<div id="searchCon">    
<form role="search" method="get" id="searchform" class="searchform" action="http://somesite.com/">
<div style="float:left">

    <input type="text" value="" name="s" id="s" />
</div>
<div style="float:right;padding-top:2px">
    <input type="image" value="Search" src="button.png" id="searchsubmit" style="opacity: 1; " />
</div>
</form>
</div>

सीएसएस:

#searchCon {
  float: right;
  display: inline-block;
  height:37px;
  padding: 0px 10px 10px 0px;
  color:#2a2a2a;
}
0
जोड़ा
अजीज़, दुर्भाग्यवश यह सब क्रोम के साथ-साथ फ़ायरफ़ॉक्स में खोज बार को दबा दिया गया था।
जोड़ा लेखक user3017625, स्रोत
क्रोम और फ़ायरफ़ॉक्स दोनों में बटन को खोज पट्टी के ऊपर कुछ पिक्सेल धक्का दिया जाता है।
जोड़ा लेखक user3017625, स्रोत
मैंने पैडिंग को पैडिंग में बदलने की कोशिश की: 10 पीएक्स 10 पीएक्स 10 पीएक्स 0 पीएक्स; लेकिन यह कुछ भी नहीं किया।
जोड़ा लेखक user3017625, स्रोत
इससे मदद मिली कि मैं सिर्फ बटन के लिए शीर्ष पैडिंग लागू कर सकता हूं, लेकिन इसने खोज बार को लगभग 10 पीएक्स तक धक्का दिया और मैं इसे वापस आने के लिए नहीं मिल सकता।
जोड़ा लेखक user3017625, स्रोत
हे भगवान! हाँ, यह काम किया! आपको बहुत - बहुत धन्यवाद!
जोड़ा लेखक user3017625, स्रोत
ठीक है, लेकिन क्या आपको छवि और खोज इनपुट क्षेत्र लाइन ठीक से मिलती है, या फिर भी खोज क्षेत्र के नीचे छवि को धक्का दिया गया है?
जोड़ा लेखक Aziz Shaikh, स्रोत
एक और दृष्टिकोण की कोशिश की, देखते हैं कि यह आपकी मदद करता है या नहीं। इस लिंक को जांचें: jsfiddle.net/B5wcf
जोड़ा लेखक Aziz Shaikh, स्रोत
#searchCon CSS में पैडिंग (10px पर शीर्ष पैडिंग करें) का उपयोग करें
जोड़ा लेखक Aziz Shaikh, स्रोत