所以，我有一个input框，由于我选择的字体和大小自定义等，它经常拥抱左侧。但是，当您输入一些文本时，因此看起来很恶心。我想要的只是有某种东西可以更改以更改文本框中文本实际开始的距离(除了left、center和right(。
请参阅下面的代码。请注意，当您在文本框中键入时，它会稍微拥抱左侧，看起来很糟糕。
.signatureInformationSign {
color: #266AC3;
font-family: 'Titillium Web', sans-serif;
font-weight: 400;
font-size: 50px;
}
.editorTextInfo {
color: #016F47;
font-family: 'Source Sans Pro', sans-serif;
font-weight: 400;
font-size: 50px;
margin-top: 35px;
}
.editorTextBox {
font-family: 'Hind', sans-serif;
margin-top: 80px;
font-size: 30px;
height: 48px;
width: 260px;
border: 3px solid darkGray;
border-radius: 18px;
}
.editorTextBox:focus {
outline: 0;
}
input[type = "radio"]:after {
width: 25px;
height: 25px;
border-radius: 50%;
top: -12px;
right: 6px;
margin-right: 50px;
background-color: darkGray;
content: "";
position: relative;
display: inline-block;
}
input[type = "radio"]:hover {
cursor: pointer;
}
input[type = "radio"]:checked:after {
width: 25px;
height: 25px;
border-radius: 50%;
background-color: orange;
top: -12px;
right: 6px;
content: "";
position: relative;
display: inline-block;
}
.editorPhoneBox {
font-family: 'Hind', sans-serif;
margin-bottom: 20px;
font-size: 16px;
height: 22px;
width: 28px;
border: 2px solid darkGray;
border-radius: 6px;
}
.editorPhoneBoxOther {
font-family: 'Hind', sans-serif;
margin-bottom: 20px;
font-size: 16px;
height: 22px;
width: 38px;
border: 2px solid darkGray;
border-radius: 6px;
}
.editorPhoneBox:focus, .editorPhoneBoxOther:focus {
outline: 0;
}
#plusButton {
color: gray;
font-family: 'Source Sans Pro', sans-serif;
font-size: 32px;
margin-top: -15px;
}
#plusButton:hover {
cursor: pointer;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
<link href="index.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Hind|Source+Sans+Pro|Titillium+Web" rel="stylesheet">
</head>
<body>
<div id = "question1">
<center><div class = "signatureInformationSign">Signature Information Sign</div></center>
<center><div class = "editorTextInfo">Name</div></center>
<center><input type = "text" class = "editorTextBox"></center>
</div>
</body>
</html>附言我不在乎你对它是否真的好看的意见，我只想要一个解决方案。
您可以添加填充。增加了20px输入框的左右;
.signatureInformationSign {
color: #266AC3;
font-family: 'Titillium Web', sans-serif;
font-weight: 400;
font-size: 50px;
}
.editorTextInfo {
color: #016F47;
font-family: 'Source Sans Pro', sans-serif;
font-weight: 400;
font-size: 50px;
margin-top: 35px;
}
.editorTextBox {
font-family: 'Hind', sans-serif;
margin-top: 80px;
font-size: 30px;
height: 48px;
width: 260px;
border: 3px solid darkGray;
border-radius: 18px;
padding-left: 20px;
padding-right: 20px;
}
.editorTextBox:focus {
outline: 0;
}
input[type = "radio"]:after {
width: 25px;
height: 25px;
border-radius: 50%;
top: -12px;
right: 6px;
margin-right: 50px;
background-color: darkGray;
content: "";
position: relative;
display: inline-block;
}
input[type = "radio"]:hover {
cursor: pointer;
}
input[type = "radio"]:checked:after {
width: 25px;
height: 25px;
border-radius: 50%;
background-color: orange;
top: -12px;
right: 6px;
content: "";
position: relative;
display: inline-block;
}
.editorPhoneBox {
font-family: 'Hind', sans-serif;
margin-bottom: 20px;
font-size: 16px;
height: 22px;
width: 28px;
border: 2px solid darkGray;
border-radius: 6px;
}
.editorPhoneBoxOther {
font-family: 'Hind', sans-serif;
margin-bottom: 20px;
font-size: 16px;
height: 22px;
width: 38px;
border: 2px solid darkGray;
border-radius: 6px;
}
.editorPhoneBox:focus, .editorPhoneBoxOther:focus {
outline: 0;
}
#plusButton {
color: gray;
font-family: 'Source Sans Pro', sans-serif;
font-size: 32px;
margin-top: -15px;
}
#plusButton:hover {
cursor: pointer;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
<link href="index.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Hind|Source+Sans+Pro|Titillium+Web" rel="stylesheet">
</head>
<body>
<div id = "question1">
<center><div class = "signatureInformationSign">Signature Information Sign</div></center>
<center><div class = "editorTextInfo">Name</div></center>
<center><input type = "text" class = "editorTextBox"></center>
</div>
</body>
</html>