テキストにスペースを入れる方法<input>

Question

画像のように左右のスペースをテキストの内側に入れたいです。 テキストスペースで左スペースを置くことができましたが、正しいスペースでは機能しないようです。

誰でも手伝ってもらえますか？ sample image

Answer 1

ここでは、入力には、右に埋めてインデントすることができます。

input {padding: 0 5px} 

上記の入力は、内側と右側の両方に5pxのスペースを持ちます。

text-indent: 10px; 
padding-right: 20px; 

私は組み合わせて「RTL」の値が「方向」属性であることができると思います別の方法：あなたのマークアップで許可されていれば

Answer 2

まあ一つの選択肢は、パディングとテキストのインデントを組み合わせることであろう"text-align：left"を付けてください。

Answer 3

あなたが入力したテキストにいくつかのパディングを設定することができ、次のコード

input{ 
 
    border: none; 
 
    padding: 10px; 
 
    margin: 10px; 
 
    height: 20px; 
 
    width: 500px; 
 
    border:1px solid #eaeaea; 
 
    outline:none; 
 
} 
 
input:hover{ 
 
    border-color: #a0a0a0 #b9b9b9 #b9b9b9 #b9b9b9; 
 
} 
 
input:focus{ 
 
    border-color:#4d90fe; 
 
}

<div class="mainDiv"> 
 
<input type="text" /> 
 
</div>

Answer 4

を試してください：ここでは

input { 
    padding: 0 5px /* 0 is for top and bottom | 5px is for left and right */ 
} 

CSSのパディングプロパティのDOC：https://www.w3schools.com/css/css_padding.asp

を

Answer 5

その1つのテキストボックスに、あなたは、両方の側面をしたい場合は、ウィンドウに適切なスペースを持っている場合、あなたはこのように使用only.Ifそれが動作しますpaddingを使用することができ、以下のようclassを追加し、css

<input type='text' name='firstname' class='space'> 
    .space 
    { 
     padding-left : 10px; 
     padding-right: 10px; 
    } 

でそれを使用しますあなたがどんなスクリーンサイズでもスペースを保持したいなら、border-boxを使うことができます。

.space 
{ 
    padding-left : 10px; 
    padding-right: 10px; 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
}