CSS'de metin ve seçme kutuları aynı genişliğe hizalanıyor mu?

Question 1

Tamam, görünüşe göre bunu düzeltmek imkansız. Bir metin kutum ve bir seçim kutum var. Sol kenar boşluğu ve sağ kenar boşluğunda sıralanmaları için tam olarak aynı genişlikte olmalarını istiyorum.

<!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
            input, select {
                width: 200px;
            }
        </style>
    </head>
    <body>
        <input type="text" value="ABC"><br>
        <select>
            <option>123</option>
        </select>
    </body>
</html>

Sence bu olur, değil mi? Hayır! Firefox'ta seçim kutusu 6px daha kısadır. Ekran görüntüsüne bakın. firefox'ta ekran görüntüsü

Tamam, şimdi kodu düzenleyelim ve iki stil yapalım.

<style type="text/css">
    input {
        width: 200px;
    }
    select {
        width: 206px;
    }
</style>

Tamam bu çalışıyor!

Firefox'ta düzeltildi

Oh bekleyin, Chrome'da daha iyi test edin ...

chrome ekran görüntüsü

FFFFFFFUUUUUUUUUUUU

Birisi bana bunları tüm tarayıcılarda nasıl sıralayacağımı söyleyebilir mi? Neden tümünde width: 200px yapamıyorum, neden tüm tarayıcılar bunu farklı gösteriyor? Ayrıca biz oradayken metin kutusu ve seçim kutusu neden farklı yüksekliklerde? Onları nasıl aynı yüksekliğe çıkarırız? Yükseklik ve çizgi yüksekliğini denediniz, boşuna.

Çözüm:

Tamam, çözümü aşağıdaki cevaplardan biraz yardım alarak buldum. Anahtar, kenarlık ve dolguyu içeren genişliği belirlediğinizde kutu boyutlandırma: border-box özelliğini kullanmaktır . Burada mükemmel açıklamaya bakın . O zaman tarayıcı onu dolduramaz.

Kod aşağıdadır, kutuların yüksekliğini de aynı boyuta ayarlamış ve kutunun içindeki metni hizalayacak şekilde girintili yapmış. Ayrıca, Chrome'un hizalamayı atacak seçim kutuları için kullandığı gerçekten garip görünen bir kenarlığı olduğundan, sınırı da ayarlamanız gerekir. Bu, HTML5 sitelerinde çalışacaktır (örneğin, IE9, Firefox, Chrome, Safari, Opera vb. Destekleyen).

<!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
            input, select {
                width: 200px;
                border: 1px solid #000;
                padding: 0;
                margin: 0;
                height: 22px;
                -moz-box-sizing: border-box;
                -webkit-box-sizing: border-box;
                box-sizing: border-box;
            }
            input {
                text-indent: 4px;
            }
        </style>
    </head>
    <body>
        <input type="text" value="ABC"><br>
        <select>
            <option>123</option>
            <option>123456789 123123123123</option>
            <option>123456789 123123123123 134213721381212</option>
        </select>
    </body>
</html>

Son bir uyarı, giriş düğmelerinin, onay kutularının, vb. Bu stile dahil edilmesini istemeyebilirsiniz, bu nedenle input:not([type='button'])belirli türlere uygulamamak için öğesini kullanın veya uygulamak input[type='text'], input[type='password']istediklerinizi belirtmek için kullanın.

Question 2

Bunun nedeni, <input type="text" />öğenin öğeden biraz farklı bir varsayılan stile sahip olmasıdır, <select>örneğin, kenarlık, dolgu ve kenar boşluğu değerleri farklı olabilir.

Bu varsayılan stilleri Firefox için Firebug veya Chrome için yerleşik olan gibi bir öğe denetçisi aracılığıyla gözlemleyebilirsiniz. Ayrıca, bu varsayılan stil sayfaları tarayıcıdan tarayıcıya farklılık gösterir.

İki seçeneğiniz var:

Her iki öğe için de kenarlık, dolgu ve kenar boşluğu değerlerini aynı olacak şekilde açıkça ayarlayın
Kendi CSS stil sayfalarınızdan önce eklenecek bir CSS sıfırlama stil sayfası

Ben 1. seçeneği tercih ederim çünkü 2. seçenek çok fazla çalışma gerektiriyor ve tonlarca gereksiz CSS ile karşılaşacaksınız. Ancak bazı web geliştiricileri sıfırdan başlamayı ve tam kontrole sahip olmayı tercih eder.

Question 3

Bu sizi yaklaştıracak, ancak bu düzeyde bir hassasiyet neredeyse imkansız.

<div style="width: 200px"><input type="text" style="width: 100%; margin: 0; padding: 0" /></div>
<div style="width: 200px">
    <select id="Select1" style="width: 100%; margin: 0; padding: 0">
        <option>1</option>
    </select>
</div>

Question 4

Farklı tarayıcılar varsayılan olarak farklı stiller uygular. Hem kenar boşluğunu hem de dolguyu 0 olarak sıfırlamanın, hem Firefox hem de Chrome'da her iki öğeyi de eşit genişlikte yaptığını buldum.

<html>
    <head>
        <title>Test</title>
        <style type="text/css">
            input, select {
                margin: 0;
                padding: 0;
                width: 200px;
            }
        </style>
    </head>
    <body>
        <input type="text" value="ABC"><br />
        <select>
            <option>123</option>
        </select>
    </body>
</html>

Kişisel olarak, bir tasarımın birden fazla tarayıcıda harika görünmesini sağlamaya çalışmadan önce YUI CSS Reset gibi minimal bir CSS sıfırlama stil sayfası kullanmayı seviyorum .

Question 5

Söz konusu hem seçme hem de giriş etiketlerine bir sınıf ekleyin, yani:

<input class='custom-input'/>
<select class='custom-input'></select>

daha sonra tasarımınıza uyması için aşağıdaki css'i değiştirin:

.custom-input {
        width:140px;
        border:1px solid #ccc;
        margin:1px;
        padding:3px;
        box-sizing: border-box;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        -ms-box-sizing:content-box;
        -moz-box-sizing:content-box;
        -webkit-box-sizing:content-box;
        box-sizing:content-box;
    }

obvs bu, tarayıcıları desteklemek için bir düzeltmedir

Question 6

Tablo 4 girişini kullanırsanız, aşağıdaki çözümü kullanabilirsiniz - ie7 ile de uyumludur:

<tr style="width:1px;"><td style="width:inherit;position:relative;">
    <select style="width:100%;"> 
    </select> 
</td></tr>
<tr><td>
    <input type="text" style="width:150px;"/>
</td></tr>

Bu şekilde, tablo hücresi genişliği girişin genişliğine sabitlenir,

Ve bu şekilde, seçim bu nedenle her zaman kalan genişliği alır ve d girişiyle mükemmel şekilde hizalanır.

Question 7

Her iki öğeden de varsayılan sınırları kaldırmayı deneyin:

select, input {
 border:0;
}

Question 8

Evet, son derece sinir bozucu. Ancak, HTML sayfamın en üstüne bir "<! DOCTYPE html>" etiketi koyana kadar bu konuda hiçbir zaman sorun yaşamadım. Web sayfam, bu etiketi belgemin en üstüne yerleştirene kadar test edebileceğim tüm platformlarda düzgün şekilde görüntülendi.

Bu "gerçek özellikler" olsa da, bu hizalama sorunlarının kaynağı gibi görünüyor. FWIW, HTML5'i belirtmek için HTML5 öğeleri, satır içi CSS vb. Kullanıyorum. YMMV.