![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?5a7ff87)
よろしくお願いします。
yahooカスタム検索のサービスが終了するとのことでgoogleカスタム検索を試しているのですが、
テキストエリアとボタンが微妙にずれてしまいます。
上のラインは合っているのですが、下のラインがボタンが1pxほど大きいため、
ずれて見えてしまいます(画像添付のとおり)。
cssでその差(テキストエリアとボタンの高さをそろえて上下のラインもそろえる)を
修正したいのですがどのように記述すれば良いのでしょうか?
ご教授頂けましたら幸いです。
なお、当方がgoogleカスタム検索を利用するにあたり
cssをカスタマイズしたのは現時点では下記のコードのみです。
/* 検索窓の余白管理 */
.gsc-control-cse {
padding: 0em!important;
}
.gsc-search-box {
margin: 0 !important;
padding: 0 !important;
}
以上、よろしくお願いします。
![「googleカスタム検索 ボタンがずれる」の質問画像](http://oshiete.xgoo.jp/_/bucket/oshietegoo/images/media/e/509170708_5c63b92ddbf70/M.png)
No.2ベストアンサー
- 回答日時:
No1です。
構成が不明なので、何とも言えませんが・・・
>もしくはマージンなどを変えられて見栄えを整えることができるのでしたら助かるのですが
ダメもとで、
.gsc-input-box { margin-top: 2px; }
とかを試してみる価値はあるかも知れません。
(数値は適当に調節)
おかげさまで解決しました!
お教えいただいた方法をもとにボタンのサイズも変更すると、テキストエリアとボタンがぴったりと並びました。
.gsc-input-box {
margin-top: 3px !important;
}
.gsc-search-button {
height:25px !important;
}
ご回答、誠にありがとうございました!
No.1
- 回答日時:
こんにちは
要素構成やレイアウト方法が不明な状態では、なんとも・・・
>cssをカスタマイズしたのは現時点では下記のコードのみです。
それをはずしても(=そもそも最初から)、ずれている状態なのでしょうか?
・・・であるなら、googleさんにクレームしてみるとか。
ご回答誠にありがとうございます。
仰せのとおり、問題切り分けのためcssのファイル自体を削除しましたが同じ現象でした。。。
> (=そもそも最初から)
どうやらそれらしいです。
只今、カスタム検索のコントロールパネル内でフォームのデザインを確認するとそれもまったく同様にずれてました;
.gsc-control-cse のように、googleカスタム検索のスタイルを継承してボタンの幅、
もしくはマージンなどを変えられて見栄えを整えることができるのでしたら助かるのですが。。。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS 検索窓とcssハックについて 3 2022/04/22 12:21
- Google Maps iPhoneのGoogle検索窓を通常の大きさに 戻す方法を教えて頂けませんか?(切実) 日本全国の 2 2022/10/02 02:08
- Excel(エクセル) 【Excel】指定のセル内容を基に別シートのセルを検索して選択する【VBA】 1 2022/06/16 16:16
- JavaScript スマフォではボタンを表示させたくない 2 2023/01/20 14:26
- その他(SNS・コミュニケーションサービス) Yahoo!とGoogle検索のしくみの違いを教えてください 2 2022/08/14 01:53
- その他(ブログ) ブログを始めたいと思うのですが、下記のような場合のおすすめブログサービスを教えてください。 収益化な 4 2023/04/10 10:01
- Yahoo!メール yahooメールの検索結果を全て表示するには? 1 2023/05/16 14:34
- Visual Basic(VBA) ユーザーフォーム「frm_基本❶」を立ち上げると新規で入力する行数を右下のNoとして表示しています。 1 2023/03/16 19:02
- その他(ブラウザ) Google検索中に… インハイTVを観たくて 情報収集のために Google検索をしていました。 2 2023/08/10 12:23
- 迷惑メール・スパム gmailの過去のメールを一括削除する方法について 3 2023/04/19 05:27
関連するカテゴリからQ&Aを探す
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
テーブルセル余白(例えば左側...
-
縦ボーダーの長さ変更方法
-
borderの太さを1px以下に見せ...
-
レスポンシブWeb 右側の表示が...
-
ホームページ作成後、別のブラ...
-
L字みたいな記号の表示
-
シーサーブログのヘッダー画像...
-
ピクチャーボックスの大きさに...
-
複数の画像を1枚にしたファイ...
-
Dreamweaverで縦の区切り線あり...
-
PDFファイルが破損していると表...
-
ブログを投稿したことを 「UP」...
-
ダウンロードはアップロードと...
-
画像の横に文章を流すには?
-
デコログの説明欄
-
FC2 ブログのどこに 『人気ブロ...
-
MT4.2「カスタムフィールドの値...
-
画像にコピーライト表記を貼り...
-
iPhoneで HTMLファイルを閲覧
-
画像中の線分の点線化・破線化...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
テーブルセル余白(例えば左側...
-
borderの太さを1px以下に見せ...
-
縦ボーダーの長さ変更方法
-
レスポンシブWeb 右側の表示が...
-
テキストボックスが選択できない
-
border-widthの太さ指定について
-
ホームページ作成後、別のブラ...
-
[CSS]エラーの原因
-
L字みたいな記号の表示
-
PDFファイルが破損していると表...
-
ピクチャーボックスの大きさに...
-
グーグルのアイコンを操作して...
-
シーサーブログのヘッダー画像...
-
画像
-
iPhoneで HTMLファイルを閲覧
-
ホームページビルダーで文字の...
-
ExcelVBAで挿入画像の縦横サイ...
-
画像と画像の間のスペースはど...
-
一行は何ピクセル?
-
複数の画像を1枚にしたファイ...
おすすめ情報