Question

我认为我已经完成了以下正确操作，但是我注意到选中该光标时，光标位于文本框的中间，而不是左侧。但是，如果我将孩子的位置改为相对位置，则光标将放置在最左侧...

我试图将父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;
}

enter image description here

但是，如果将css更改为以下内容，则它看起来更正确：

div.login_form {
     position: absolute;
    top: 20em;
    left: 50em;
}

Answer 1

将输入的填充从％更改为px：

div.medical_signup_main input {
   padding: 0px 5px;
}

使用子级的绝对位置单击时，光标位于文本框的中间，而不是左侧

1 个答案: