Question

我想在文本字段内部从左侧到文本提供空间，例如内部填充，但不会更改文本字段的大小。

这是我的css

    form input{
       width: 263;
       height:43;
       border: 1px solid #d4d4d4;
       line-height: 1.5em;
       padding-right:15;
    }




<form  action="contact_page.php" method="GET">
            <input type="text" name="n" placeholder="Name" size="34"/>
           &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <input type="text" name="e" placeholder="Email" size="34" />
            <br />
            <br />
            <textarea cols="54" rows="7" placeholder="Message"></textarea>
            <br />
            <br />
            <input type="submit" id="btn" value="Send It Now..." />
        </form>

Answer 1

您可以使用box-sizing:border-box这不会使用宽度添加填充值，它会调整padding值宽度width。

您需要在px属性值

中添加css

form input{
   width: 263px;
   height:43px;
   border: 1px solid #d4d4d4;
   line-height: 1.5em;
   padding-right:15px;
   padding-left:15px;
   box-sizing:border-box;
}

Answer 2

可以使用CSS属性box-sizing：MDN box-sizing

// example of box-sizing
input {
  box-sizing: border-box;
}

// how to modify your example
form input{
   border: 1px solid #d4d4d4;
   box-sizing: border-box;
   height: 43px;
   line-height: 1.5em;
   padding-right: 15px;
   width: 263px;
}

jsBin示例：http://jsbin.com/yizuru/

Answer 3

尝试text-indent：

＆＃13;

input[type=text][name=n] {
  text-indent: 5px
}

＆＃13;

With text indent:
<input type="text" name="n" placeholder="Name" value="Alex" />
<br/>Without text indent:
<input type="text" name="e" placeholder="Email" value="abc@xyz.com" />

＆＃13;

Answer 4

你可以尝试这个：

Css代码：

form input{
   width: 263px;
   height:43px;
   border: 1px solid #d4d4d4;
   line-height: 1.5em;
   padding-right:15px;
   padding-left:15px;
   box-sizing:border-box;
}

Html代码：

<form  action="contact_page.php" method="GET">
            <input type="text" name="n" placeholder="Name" size="34"/>
           &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br /><br />
            <input type="text" name="e" placeholder="Email" size="34" />
            <br />
            <br />
            <textarea cols="54" rows="7" placeholder="Message"></textarea>
            <br />
            <br />
            <input type="submit" id="btn" value="Send It Now..." />
        </form>

DEMO PAGE

textfield内部文本间距

4 个答案: