inputのズレを揃える

2018.06.05

検索窓などブラウザ間やiphoneやandroidなどで見たときにずれているなどの現象がよく見られるとは思います。

そんなときの解決策としては
・buttonにoverflow:visible;のプロパティを指定する
・vertical-alignを指定
・positionをrelativeにして、高さの相対値を揃える

上記の指定をしてやることです、

select, input, textarea, button { 
     vertical-align:middle; 
     position:relative; 
}

input { 
     height: 15px; 
     line-height: 15px; 
}

button, input[type="button"] {
     overflow:visible; 
     height:20x;
     padding:0 3px;
}

select, input, textarea, button {

vertical-align:middle;

position:relative;

}

input {

height: 15px;

line-height: 15px;

}

button, input[type="button"] {

overflow:visible;

height:20x;

padding:0 3px;

}

この記事を見た人は次の記事も見ています。

web制作で便利なツール

Flexboxのjustify-contentでの左寄せ

inputのズレを揃える

この記事を見た人は次の記事も見ています。

コメント

最近の投稿

アーカイブ

RELATED

【イラストレーター】正方形/正円を描く方法

第二十三回「Imsanityを使って画像一括管理・自動リサイズ」

カスタム投稿のアーカイブページにもAll in One SEOのディスクリプション設定を反映する

IE対応　CSSハック

第五十四回「SEO対策におけるメタディスクリプションの内容」

cssを使って文字を折り返す

inputのズレを揃える

この記事を見た人は次の記事も見ています。

コメント

最近の投稿

アーカイブ

RELATED

【イラストレーター】正方形/正円を描く方法

第二十三回「Imsanityを使って画像一括管理・自動リサイズ」

カスタム投稿のアーカイブページにもAll in One SEOのディスクリプション設定を反映する

IE対応 CSSハック

第五十四回「SEO対策におけるメタディスクリプションの内容」

cssを使って文字を折り返す

IE対応　CSSハック