2015-09-02 18 views
6

Oluşturduğum bu formla ilgili sorun yaşıyorum. Eski bir proje üzerinde çalışmaya başladım ve taze ve hurdaya geçmeye karar verdim. Proje, Google ana sayfası tasarımının bir eğlencesiydi. Gerçekten ihtiyaç duyulmayan bazı şeyler hariç kesin bir tasarıma sahip olmak istedim. Arama kutusu (form) istediğim yere taşındı, ancak yeni logo nedeniyle, arama kutumu animasyon sırasında elime yerleştirmek zorunda kaldım. Sorun şu ki, koordinatlarm istediğim gibi, ancak yükseklik ve genişlik değişmeyecek.Arama Kutusunun Genişliği/Yüksekliği Nasıl Değiştirilir

<!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> 

'zarar verici' bir şey olmadan yükseklik ve genişliğini değiştirmek için bir yolu var mı: Bu benim bütün bütün kodudur. Sınıfı, .SearchBar, kodumuma boyunu ve genişliğini değiştirdiğim yanıt vermek istiyorum. Onu 550 piksel olarak değiştirdim ve hala çalışmıyor, bunu okumak için zaman ayırdığınız için teşekkür ederim.

cevap

6

Gerçek giriş elemanını değiştirmek için, gerçek giriş elemanının genişliğini değiştirmeniz gerekir. Sen div değiştirdin, ama girişi değil.

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

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

Bunu bana açıkladığınız için teşekkür ederim, bundan asla haberdar olmazdım. Tekrar teşekkürler, bu topluluktan bir cevap bulabildiğime sevindim. – AnotherProgrammer

İlgili konular