2015-09-02 10 views
6

मुझे इस फ़ॉर्म के साथ परेशानी हो रही है जो मैं बना रहा था। मैंने एक पुरानी परियोजना पर काम करना शुरू कर दिया और कोड शुरू करने का फैसला किया और कोड को स्क्रैप करने का फैसला किया। यह परियोजना Google होमपेज डिज़ाइन का मनोरंजन था। मैं कुछ चीजों को छोड़कर एक सटीक डिजाइन करना चाहता था, जिन्हें वास्तव में जरूरी नहीं है। खोज बॉक्स (फॉर्म) जहां मैं चाहता था ठीक स्थानांतरित हो गया, लेकिन नए लोगो की वजह से, मुझे एनीमेशन के दौरान हाथ में अपना खोज बॉक्स रखना पड़ा। समस्या यह है कि मेरे निर्देशांक यह हैं कि मैं इसे कैसे चाहता था, लेकिन ऊंचाई और चौड़ाई नहीं बदलेगी।एक खोज बॉक्स की चौड़ाई/ऊंचाई को कैसे बदलें

<!DOCTYPE HTML> 
<HTML> 
    <head> 
     <title>Google</title> 
     <style> 
      .GoogleLogo { 
       position:absolute; 
       TOP:125px; 
       LEFT:575px; 
      } 

      .SearchBar { 
       position: absolute; 
       top: 355px; 
       left: 575px; 
       height: 30px; 
       width: 50px; 
      } 

     </style> 
    </head> 
    <body> 

     <div class="GoogleLogo"> 
      <a href="https://www.google.com/?gws_rd=ssl#q=Google+logo+history&hl=en&oi=ddle"><img src="../../Pictures/Google2.gif" alt="Google" width="400" height="231" border="0" /></a> 
     </div> 

     <div class="SearchBar"> 
      <form> 
          <input type="text" placeholder="Search..." required> 
      </form> 
     </div> 

    </body> 
</HTML> 

वहाँ के बिना 'हानिकारक' कुछ भी ऊंचाई और चौड़ाई बदलने के लिए एक रास्ता है: यह मेरे पूरे पूरे कोड है। मैं अपनी कोडिंग का जवाब देने के लिए कक्षा, .SearchBar चाहता हूं, जिसमें मैंने ऊंचाई और चौड़ाई बदल दी है। मैंने इसे 550 पिक्सल में बदल दिया, और यह अभी भी काम नहीं करता है, इसे पढ़ने के लिए समय निकालने के लिए धन्यवाद।

उत्तर

6

वास्तविक इनपुट तत्व के साथ बदलने के लिए, आपको वास्तविक इनपुट तत्व की चौड़ाई बदलनी होगी ... आपने div बदल दिया है, लेकिन इनपुट नहीं।

.SearchBar { 
    position: absolute; 
    top: 355px; 
    left: 575px; 
} 

.SearchBar input { 
    height: 30px; 
    width: 50px; 
} 
+0

मुझे यह समझाने के लिए धन्यवाद, मैं होगा इसके बारे में नहीं देखा। धन्यवाद, फिर, मुझे खुशी है कि मैं इस समुदाय से एक जवाब खोजने में सक्षम था। – AnotherProgrammer

संबंधित मुद्दे