2016-04-01 62 views
1

我無法在輸入內移動文本。如果我添加邊距或填充,它會移動或縮放輸入。我想將「用戶名」從左側移動10px。在輸入中移動文本

.log_inp input[type="username"] { 
 
    top: 80px; 
 
    height: 28px; 
 
    width: 234px; 
 
    border: solid 1px #e4e4e4; 
 
    font-family: OpenSans-Italic; 
 
    color: #9a9a9a; 
 
    font-size: 13px; 
 
} 
 
input { 
 
    padding: 0px; 
 
}
<div class="log_inp"> 
 
    <form action="#"> 
 
    <input type="username" name="Username" placeholder="Vārds..."> 
 
    <br> 
 
    <input type="password" name="Password" placeholder="Parole..."> 
 
    <br> 
 
    <input type="submit" value="Ienākt"> 
 
    </form> 
 
</div>

enter image description here

+0

你的意思是你想通過向右推佔位符文本及其光標位置待着您輸入的佔位符文本? – j08691

+0

[HTML5佔位符css填充]的可能重複(http://stackoverflow.com/questions/4919680/html5-placeholder-css-padding) – GreeKatrina

回答

1

如果你只想在移動佔位符,使用供應商前綴的CSS屬性:

::-webkit-input-placeholder { 
 
    padding-left: 10px; 
 
} 
 
::-moz-placeholder { 
 
    padding-left: 10px; 
 
} 
 
:-ms-input-placeholder { 
 
    padding-left: 10px; 
 
}
<div class="log_inp"> 
 
    <form action="#"> 
 
    <input type="username" name="Username" placeholder="Vārds..."> 
 
    <br> 
 
    <input type="password" name="Password" placeholder="Parole..."> 
 
    <br> 
 
    <input type="submit" value="Ienākt"> 
 
    </form> 
 
</div>

1

如果你想改變填充並且不讓它影響輸入的總規模,設置box-sizingborder-box

在以下示例中,兩個輸入具有相同的大小,但我給用戶名留下了一個填充。

.log_inp input { 
 
    top: 80px; 
 
    height: 28px; 
 
    width: 234px; 
 
    border: solid 1px #e4e4e4; 
 
    font-family: OpenSans-Italic; 
 
    color: #9a9a9a; 
 
    font-size: 13px; 
 
    padding: 0px; 
 
    box-sizing: border-box; 
 
} 
 
input[type="username"] { 
 
    padding-left:10px; 
 
}
<div class="log_inp"> 
 
    <form action="#"> 
 
    <input type="username" name="Username" placeholder="Vārds..."> 
 
    <br> 
 
    <input type="password" name="Password" placeholder="Parole..."> 
 
    <br> 
 
    <input type="submit" value="Ienākt"> 
 
    </form> 
 
</div>

0

.log_inp input[type="username"] { 
 
    
 
    height: 28px; 
 
    width: 234px; 
 
    border: solid 1px #e4e4e4; 
 
    font-family: OpenSans-Italic; 
 
    color: #9a9a9a; 
 
    font-size: 13px; 
 
padding-left:10px; 
 
} 
 
input { 
 
    padding: 0px; 
 
}
<div class="log_inp"> 
 
    <form action="#"> 
 
    <input type="username" name="Username" placeholder="Vārds..."> 
 
    <br> 
 
    <input type="password" name="Password" placeholder="Parole..."> 
 
    <br> 
 
    <input type="submit" value="Ienākt"> 
 
    </form> 
 
</div>

-2

檢查出來它可能有助於ü

input{ 
    text-align:center; 
} 
+1

OP沒有要求文本居中。請仔細閱讀。 – Aziz