我认为我已经正确地完成了以下操作，但我注意到选中时光标位于文本框的中间而不是左侧。但是，如果我将子项的定位改为相对定位，则光标将放置在最左侧...
我尝试将父 div 类设置为相对定位，将子 div 类设置为绝对定位。
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="medical_signup_main">
<div class="medical_signup">
<h2>Welcome to the Register's Section</h2>
</div>
<form class="medical_signup" action="medical_signup_process.php" method="POST">
<label>First Name:</label>
<br />
<br />
<input type="text" name="first_name" placeholder="First Name">
<br />
<br />
<label>Last Name:</label>
<br />
<br />
<input type="text" name="last_name" placeholder="Last Name">
<br />
<br />
<label>E-Mail:</label>
<br />
<br />
<input type="text" name="e-mail" placeholder="e-mail">
<br />
<br />
<label>Username:</label>
<br />
<br />
<input type="text" name="username" placeholder="username">
<br />
<br />
<label>Password:</label>
<br />
<br />
<input type="password" name="password" placeholder="password">
<br />
<br />
<label>Which country is this medical clinic located?</label>
<br />
<br />
<label>Which State is this medical clinic located?</label>
<br />
<br />
<input type="text" name="state" placeholder="Which State?">
<br />
<br />
<button type="submit" name="submit">Signup!</button>
</form>
This is my CSS code:
div.medical_signup_main {
position: relative;
top: 20em;
left: 50em;
}
div.medical_signup_main input {
height: 40px;
padding: 0px 5%;
margin-bottom: 4px;
border-radius: 10px solid black;
background-color: #fff;
font-family: arial;
font-size: 16px;
color: #111;
display: inline-block;
width: 25em;
margin-top: 1em;
}
div.medical_signup_main select {
font-size: 1em;
}
div.medical_signup_main label {
color:#008000;
font-size: 1.5em;
white-space: nowrap;
position: relative;
left: 0em;
top: 0em;
}
div.medical_signup_main button {
width: 10%;
height: 40px;
border:none;
background-color: #222;
font-family: arial;
font-size: 16px;
color: #fff;
cursor:pointer;
position: relative;
top: 5em;
left: 6em;
border-radius: 1em;
white-space: nowrap;
}
div.medical_signup h2{
position: absolute;
bottom: 40em;
left: 1em;
}
但是，如果将 css 更改为以下内容，则看起来更正确:
div.login_form {
position: absolute;
top: 20em;
left: 50em;
}
最佳答案
将输入的填充从 % 更改为 px:
div.medical_signup_main input {
padding: 0px 5px;
}
关于html - 使用 position absolute for child 单击时，光标位于文本框的中间而不是左侧，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53923067/