同じサイズの入力テキストボックスとボタンを取得できません

user9696370

入力テキストボックスと送信ボックスが完全に並んでいて、サイズが同じであるフォームを作成しようとしています。ただし、何らかの理由で送信ボタンの位置が数ピクセルずれているため、原因がわかりません。

要素は同じサイズで、余白とパディングを削除しようとしましたが、問題を解決できませんでした。

問題を説明するために、簡単なjfiddleを作成しました。https://jsfiddle.net/peacefulgoldfish/d50h7n9p/26/

これに関するヘルプとアドバイスに感謝します。

html

<div>
<form>
<input>
<br>
<input>
<br>
<input type="submit">
</form>
</div>

css

#div{

  width:100%;
}

form{

  text-align: center;

}

input {
   box-sizing: border-box;
  height: 10%;
  width: 50%;

}
Surendra pathak

すべての入力の幅を等しくするには、入力のボックスサイズを指定する必要があります。更新されたCSSは次のようになります。

div {
  font-size:0;
}
#form{  
  text-align: center;
  font-size: 14px;
}
input {
  height: 10%;
  width: 50%;
  box-sizing: border-box;
}

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集
0

コメントを追加

0

関連記事

分類Dev

Winformsカスタムテキストボックスのサイズを変更できません

分類Dev

入力テキスト ボックスを段落と同じサイズにする方法は?

分類Dev

フォームの入力、テキストエリア、ボタンをクリックできません

分類Dev

タグ入力をngすると、テキストボックスに同じテキストを2回入力できなくなります

分類Dev

ユーザー入力後にテキストボックスの値を取得できません

分類Dev

入力送信ボタンのテキストを太字でスタイル設定できませんか?

分類Dev

jQueryでボタンをクリックすると、入力からのテキストを表示できません

分類Dev

テキスト入力に固定フォントサイズを割り当てるときに、テキスト入力とボタンを同じ高さにするにはどうすればよいですか?

分類Dev

親と同じ入力テキストボックスの幅

分類Dev

同じ入力ボックスにタグと通常のテキストを追加する必要があります

分類Dev

入力ボックスでテキストを選択できません

分類Dev

グリッドビューのボタンのサイズを編集する方法ですが、入力テキストボックスも編集しません

分類Dev

テキスト-入力ボックス-検索ボタンは同じ行にとどまる

分類Dev

隣接する2つのボタンのテキストと同じTextViewのテキストサイズを取得します(Android)

分類Dev

GridViewでリンクボタンのテキストを取得できません

分類Dev

ブートストラップボタンは、水平形式のテキスト入力と同じ行にありません

分類Dev

入力ボックスの値を取得できません

分類Dev

PreviewKeyDownイベントでテキストボックスの現在の値を取得できませんか?

分類Dev

別のセレクターの幅に応じて、入力テキストボックスのサイズを動的に増減します

分類Dev

WPF:テキストボックスとDoubleへのバインドで入力できません。その上に

分類Dev

ボタンをクリックするとテキストのサイズが大きくなります

分類Dev

グリッド内の特定の入力ボックスからテキストを取得し、同じ行のコンボボックスを更新する

分類Dev

C#テキストボックスの最初の入力値を上書きせずに、1つのテキストボックスで2つの入力テキストボックス値を取得することは可能ですか?

分類Dev

asp.net 4.0テキストボックスでは、テキストボックスにJavaScriptの日付を入力できません

分類Dev

Selenium(python)でテキストボックスにテキストを入力できません

分類Dev

グリッドビューでリンクボタンのテキスト値を取得できません

分類Dev

入力テキストの同じ行にボタンを表示します

分類Dev

2番目のテキストボックスに値を入力できません

分類Dev

入力テキストボックスを角度のある$ scopeに添付できません

Related 関連記事

  1. 1

    Winformsカスタムテキストボックスのサイズを変更できません

  2. 2

    入力テキスト ボックスを段落と同じサイズにする方法は?

  3. 3

    フォームの入力、テキストエリア、ボタンをクリックできません

  4. 4

    タグ入力をngすると、テキストボックスに同じテキストを2回入力できなくなります

  5. 5

    ユーザー入力後にテキストボックスの値を取得できません

  6. 6

    入力送信ボタンのテキストを太字でスタイル設定できませんか?

  7. 7

    jQueryでボタンをクリックすると、入力からのテキストを表示できません

  8. 8

    テキスト入力に固定フォントサイズを割り当てるときに、テキスト入力とボタンを同じ高さにするにはどうすればよいですか?

  9. 9

    親と同じ入力テキストボックスの幅

  10. 10

    同じ入力ボックスにタグと通常のテキストを追加する必要があります

  11. 11

    入力ボックスでテキストを選択できません

  12. 12

    グリッドビューのボタンのサイズを編集する方法ですが、入力テキストボックスも編集しません

  13. 13

    テキスト-入力ボックス-検索ボタンは同じ行にとどまる

  14. 14

    隣接する2つのボタンのテキストと同じTextViewのテキストサイズを取得します(Android)

  15. 15

    GridViewでリンクボタンのテキストを取得できません

  16. 16

    ブートストラップボタンは、水平形式のテキスト入力と同じ行にありません

  17. 17

    入力ボックスの値を取得できません

  18. 18

    PreviewKeyDownイベントでテキストボックスの現在の値を取得できませんか?

  19. 19

    別のセレクターの幅に応じて、入力テキストボックスのサイズを動的に増減します

  20. 20

    WPF:テキストボックスとDoubleへのバインドで入力できません。その上に

  21. 21

    ボタンをクリックするとテキストのサイズが大きくなります

  22. 22

    グリッド内の特定の入力ボックスからテキストを取得し、同じ行のコンボボックスを更新する

  23. 23

    C#テキストボックスの最初の入力値を上書きせずに、1つのテキストボックスで2つの入力テキストボックス値を取得することは可能ですか?

  24. 24

    asp.net 4.0テキストボックスでは、テキストボックスにJavaScriptの日付を入力できません

  25. 25

    Selenium(python)でテキストボックスにテキストを入力できません

  26. 26

    グリッドビューでリンクボタンのテキスト値を取得できません

  27. 27

    入力テキストの同じ行にボタンを表示します

  28. 28

    2番目のテキストボックスに値を入力できません

  29. 29

    入力テキストボックスを角度のある$ scopeに添付できません

ホットタグ

アーカイブ