目次
ディスカッションへの返信(解決策)
ホームページ ウェブフロントエンド htmlチュートリアル 入力制御について教えてください。 _html/css_WEB-ITnose

入力制御について教えてください。 _html/css_WEB-ITnose

Jun 24, 2016 am 11:58 AM
input 偉大なる神 コントロール

入力コントロールのテキストを垂直方向に中央に配置するにはどうすればよいですか? 多くの属性を試しましたが、中央に配置できない場合でも、下部の境界線に固定することはできます。解決策を考えてください。 !ありがとうございます


ディスカッションへの返信(解決策)

1: 下の境界線に固定します
font-size:14px または line-height:20px などを調整します

2: テキストを垂直方向に中央揃えにしてみてください。必要に応じて、実装には複数の属性を組み合わせる必要がある場合があります
style="text-align:center;vertical-align:middle;line-height:20px;height:20px;"
3: リファレンス

input::-moz-focus-inner{ border: 0;padding: 0;}/*Firefox の場合*/
.comment_btn {
height:26px;
line-height:22px;/*for IE*/
width:68px; }


<div class="search" style="font-size: 12px;text-align: center;height:30px"><input type="text" name="q" class="searcht" style="background-image: url('images/4.jpg');font-size: 18px;vertical-align:middle;"/><input type="submit" class="searchb" style='vertical-align:middle;' value="搜索"/><i style='vertical-align:middle;display:inline-block;height:100%;width:0;overflow:hidden'></i></div>
ログイン後にコピー


入力のパディングを設定します

入力用に 2 つの CSS の高さの line-height を設定します一貫性のある垂直方向の中央に配置できます

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

vue3 で入力コンポーネントと統合フォームデータをカプセル化する方法 vue3 で入力コンポーネントと統合フォームデータをカプセル化する方法 May 12, 2023 pm 03:58 PM

準備 vuecreateexample を使用してプロジェクトを作成します パラメーターは大まかに以下のとおりです ネイティブ入力を使用します ネイティブ入力は主に値と変更です 変更する場合はデータを同期する必要がありますApp.tsx は次のとおりです: import{ref}from'vue';exportdefault{setup(){//username はデータです constusername=ref('Zhang San');//入力ボックスが変更されると、データを同期します constonInput =;return( )=>({

Laravelの入力隠しフィールドを実装する方法 Laravelの入力隠しフィールドを実装する方法 Dec 12, 2022 am 10:07 AM

laravel入力の隠しフィールドを実装する方法: 1. Bladeテンプレートファイルを見つけて開きます; 2. Bladeテンプレートのmethod_fieldメソッドを使用して隠しフィールドを作成します。作成構文は「{{ method_field('DELETE') }}」です。 」。

Go 言語 Web 開発フレームワークの一般的なリッチ テキスト エディター コントロール Go 言語 Web 開発フレームワークの一般的なリッチ テキスト エディター コントロール Jun 04, 2023 am 09:10 AM

Web アプリケーションの人気に伴い、リッチ テキスト エディターは Web 開発に不可欠なツールになりました。 Web 開発に Go 言語を使用する場合、Web サイトやアプリケーションを充実させるために、適切なリッチ テキスト エディター コントロールを選択する必要もあります。この記事では、Go 言語の Web 開発における一般的なリッチ テキスト エディター コントロールについて説明します。 FroalaEditorFroalaEditor は、Web 開発で広く使用されている人気のリッチ テキスト エディター コントロールです。現代性がある

入力ボックスをクリックしたときにカーソルが表示されない場合の対処方法 入力ボックスをクリックしたときにカーソルが表示されない場合の対処方法 Nov 24, 2023 am 09:44 AM

カーソルなしで入力ボックスをクリックする場合の解決策: 1. 入力ボックスのフォーカスを確認する; 2. ブラウザのキャッシュをクリアする; 3. ブラウザを更新する; 4. JavaScript を使用する; 5. ハードウェア デバイスを確認する; 6. 入力を確認するボックスのプロパティ; 7. JavaScript コードをデバッグする; 8. ページの他の要素を確認する; 9. ブラウザーの互換性を考慮する。

Vue ドキュメントの入力ボックス バインディング イベントの詳細な説明 Vue ドキュメントの入力ボックス バインディング イベントの詳細な説明 Jun 21, 2023 am 08:12 AM

Vue.js は、使いやすく、効率的で柔軟な軽量の JavaScript フレームワークで、現在最も人気のあるフロントエンド フレームワークの 1 つです。 Vue.js では、入力ボックス バインディング イベントは非常に一般的な要件です。この記事では、Vue ドキュメントの入力ボックス バインディング イベントについて詳しく紹介します。 1. 基本概念 Vue.js では、入力ボックス バインディング イベントとは、入力ボックスの値を Vue インスタンスのデータ オブジェクトにバインドすることを指し、これにより入力と応答の双方向のバインドが実現されます。 Vue.j で

Vue ドキュメントで入力ボックスのキャリッジ リターン イベントと検証機能を使用する方法 Vue ドキュメントで入力ボックスのキャリッジ リターン イベントと検証機能を使用する方法 Jun 20, 2023 am 09:13 AM

Vue は、応答性の高いデータ バインディングとコンポーネント システムを中核とする人気のある JavaScript フロントエンド フレームワークです。 Vue アプリケーションでは、入力ボックスは最も一般的に使用される UI 要素の 1 つです。ユーザーがテキストを入力するとき、復帰イベントをリッスンし、送信する前に入力を検証したいと考えています。この記事では、Vue ドキュメントでの入力ボックスの Enter イベントと検証関数の使用法を紹介します。 1. Vue の入力ボックスのキャリッジ リターン イベント Vue で入力ボックスのキャリッジ リターン イベントを監視するのは非常に簡単です。

Excelコントロールの作り方 Excelコントロールの作り方 Mar 20, 2024 am 09:40 AM

Excel オフィス ソフトウェアを使用する場合、いくつかのコントロールを上手に使用できれば、Excel フォームでよりプロフェッショナルな効果を生み出すことができます。たとえば、選択コントロールを追加すると、フォーム入力者がフォームを簡単に入力できるようになります。以下では、Excel の選択コントロールの作成方法を説明します。 1. まず、空の Excel テーブルを作成して開きます。 2. 「開発ツール」タブを追加し、左上のファイルボタンをクリックして、「Excel オプション」を見つけます。その後、カスタムリボンのオプションで開発ツールを見つけて、チェックマークが付くようにチェックします。その前に現れます。 3. Excel の作業インターフェイスに戻ると、[開発ツール] タブが表示されます。

win7と8.1どちらが良いですか?マスターが教えます win7と8.1どちらが良いですか?マスターが教えます Jul 19, 2023 pm 12:21 PM

Windows システムといえば、多くの人がよく知っていると思いますが、現在私たちの多くは Windows システムを使用していますが、Windows には win7 や win8.1 など複数のシステム バージョンが含まれています。一部のネチズンは、win7 システムと 8.1 システムのどちらを選択すべきか迷っています。win7 と 8.1 のどちらが優れていますか? win7とwin8.1の違いと選択肢をマスターが教えます。 Windows8.1はインターフェイスが豪華です。しかし、改善点のほうが大きいですが、欠点もより大きくなります。より明らかなものには、ぼやけたゲーム フォントやメモリ不足のバグなどが含まれます。メモリがどれほど大きくても、一部のゲームを実行すると、メモリが不足しているため閉じる必要があるというメッセージが表示されます。実際、検査中、記憶は正常でした。 1 つはメモリ管理メカニズムに問題があること、もう 1 つは

See all articles