html - 如何在文本框中移动用户输入?
问题描述
我试图将用户输入进一步向右移动,因为边框与文本截取并且不会使其看起来整洁。我试图让它在文本前有一个空格,但我无法让它工作。因此,如果有人知道如何解决此问题,我将不胜感激。图片在这里:
完整代码:
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>
Welcome!
</title>
</head>
<style>
html {
background-color: cadetblue;
font-family: Blippo, fantasy;
}
.welcomes {
font-size: 80px;
font-weight: 900;
margin-top: 10%;
color: white;
}
.name {
width: 38%;
margin-left: 32%;
height: 30px;
border-radius: 25px;
border-color: white;
outline: none;
caret-color: cadetblue;
}
</style>
<body>
<div class="welcomes">
<center>
Welcome!
</center>
</div>
<br>
<br>
<input type="text" class="name" style="font-family: Blippo, fantasy; color: cadetblue; font-size: 25px;" placeholder=" Please Enter Your Name To Continue!">
</body>
</html>
解决方案
用于padding-left
输入标签。
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>
Welcome!
</title>
</head>
<style>
html {
background-color: cadetblue;
font-family: Blippo, fantasy;
}
.welcomes {
font-size: 80px;
font-weight: 900;
margin-top: 10%;
color: white;
}
.name {
width: 38%;
margin-left: 32%;
height: 30px;
border-radius: 25px;
border-color: white;
outline: none;
caret-color: cadetblue;
}
</style>
<body>
<div class="welcomes">
<center>
Welcome!
</center>
</div>
<br>
<br>
<input type="text" class="name" style="font-family: Blippo, fantasy; color: cadetblue; font-size: 25px; padding-left: 20px;" placeholder=" Please Enter Your Name To Continue!">
</body>
</html>
推荐阅读
- dicom - 有没有一种简单的方法可以找到 DICOM 标签的类型?
- javascript - 我可以更改/覆盖 window.getSelection() 的定义吗?
- asp.net - 如何修复 C# asp.net 中的目录遍历安全漏洞?
- python - 如果任何列返回匹配项,则在将记录分组在一起的多个列上使用 GROUP BY
- sdl - SDL_GetWindowID 总是返回 1
- powershell - 在 Powershell 6.0 中为变量设置默认值的优雅方式?
- google-cloud-platform - 如何通过覆盖 Cloud Dataproc 上的 log4j.properties 文件来限制 pyspark 中的错误?
- swift - UITableView 后面的 MKMapView
- python - 克服python中的opencv CV_IO_MAX_IMAGE_PIXELS限制
- php - 如何在 laravel 5.8 中将变量传递给路由?