Question

我的项目中有一个<a>，它会重定向到索引页面。在一个页面中，我将它包含在一个表结束后，它在表格下方显示正常（就像我想要的那样）。但我有另一个页面，我在表格结束后包含它，但它出现在页面的最顶部。我试图修改css，html的格式并使用＆＃34;检查元素＆＃34;试着理解它为什么会发生，但我迷失了。

显示正常的页面：

＆＃13;

<!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <title>Players</title>
        <link rel="stylesheet" type="text/css" href="css/style.css">
        <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700" rel="stylesheet">
      </head>
      <body>
          <header>
            <h1>Players</h1>
          </header>
          <div class="wrapper">
    
            <a href="add-player.php"> <h2 id="add">Add a new player!</h2> </a>
    
            <table border="0" cellspacing="30px" align="center">
              <tr>
                <th>Player ID</th>
                <th>Player Name</th>
                <th>Player Age</th>
                <th>Player Nation</th>
                <th>Player Team</th>
                <th>Team ID</th>
                <th>Action</th>
              </tr>
              <?php foreach ($results as $r): ?>
              <tr style="text-align: center" class="row">
                <td><?php echo $r['playerID']; ?></td>
                <td><?php echo $r['playerName']; ?></td>
                <td><?php echo $r['playerAge']; ?></td>
                <td><?php echo $r['playerNation']; ?></td>
                <td><?php echo $r['playerTeam'] ?></td>
                <td><?php echo $r['teamID'] ?></td>
                <td><div class="action"> <a id="del" href="delete-player.php?id=<?=$r['playerID']?>">Delete</a> <hr> <a id="update" href="update-player.php?id=<?=$r['playerID']?>">Update</a></div></td>
              </tr>
              <?php endforeach; ?>
            </table>
    
            <?php include('home.php'); ?>
    
          </div>
          <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
          <script type="text/javascript" src="resources/js/main.js"></script>
      </body>
    </html>

＆＃13;

错误的页面

＆＃13;

<!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <title>Football Database</title>
        <link rel="stylesheet" type="text/css" href="css/style.css">
        <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700" rel="stylesheet">
      </head>
      <body>
        	<div class="wrapper">
            <form class="add" action="" method="post">
              <label>Player Name</label>
              <input type="text" name="p_name" required><br>
    
              <label>Player Age</label>
              <input type="text" name="p_age" required><br>
    
              <label>Player Nation</label>
              <input type="text" name="p_nation" required><br>
    
              <label>Player Team</label>
              <input type="text" name="p_team" required><br>
    
              <input id="submit" name="submit" type="submit" value="Submit">
            </form>
    
            <?php include('home.php'); ?>
    
          </div>
          <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
          <script type="text/javascript" src="resources/js/main.js"></script>
      </body>
    </html>

＆＃13;

CSS：

  html, body {
  margin: 0;
  padding: 0;
  font-family: Roboto;
}

body {
  background-image: url("../resources/img/football.jpg");
  height: 100%;
  background-size: cover;
}

h1 {
  margin: 0;
  padding: 0;
}

h2 {
  margin: 0;
  padding: 0;
}

header h1 {
  font-size: 4rem;
  text-align: center;
  text-transform: uppercase;
  margin-top: 20px;
  color: #fff;
  -webkit-text-stroke: 1px black;
}

a {
  text-decoration: none;
}

form.add {
  position: absolute;
  top: 30%;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  border: 3px solid navy;
  padding: 100px;
  box-shadow: 1px 1px 20px black;
}

form.add label {
  text-transform: uppercase;
  float: left;
  color: #fff;
  font-weight: bold;
  margin-right: 20px;
  margin-bottom: 10px;
}

form.add input {
  float: right;
  margin-bottom: 10px;
}

form.add input#submit {
  margin: 0;
  padding: 0;
  position: absolute;
  top: 70%;
  left: 50%;
  transform: translateX(-50%);
  height: 30px;
  width: 100px;
  border-radius: 15px;
  border: none;
  outline: none;
  background: #fff;
  box-shadow: 1px 1px 5px black;
  font-size: 1.25rem;
  cursor: pointer;
}

form.add input#submit:active {
  box-shadow: none;
}

.wrapper a h2#add {
  text-align: center;
  color: #386ec4;
  text-transform: uppercase;
  font-size: 2rem;
  margin-top: 10px;
  -webkit-text-stroke: 0.3px #fff;
}

.action a {
  text-transform: uppercase;
}

.action a#update {
  color: green;
  font-weight: bold;
}

.action a#del {
  color: red;
  font-weight: bold;
}

hr {
  height: 1px;
  color: grey;
  background-color: grey;
  border: none;
  outline: none;
}

/* Classes and ID's */

.wrapper {
  width: 600px;
  margin: 0 auto;
}

#buttons {
  position: absolute;
  top: 60%;
  left: 50%;
  transform: translateX(-50%);
}

.btn {
  height: 100px;
  width: 200px;
  border-radius: 10px;
  border: none;
  outline: none;
  color: #fff;
  text-transform: uppercase;
  font-weight: 300;
  font-size: 1.5rem;
  cursor: pointer;
  box-shadow: inset 0px 0px 50px rgba(0, 0, 0, 0.0);
  box-shadow: 1px 3px 6px rgba(0, 0, 0, 0.7);
}

.btn:active {
  height: 100px;
  width: 200px;
  border-radius: 10px;
  border: none;
  outline: none;
  color: #fff;
  text-transform: uppercase;
  font-weight: 300;
  font-size: 1.5rem;
  cursor: pointer;
  box-shadow: 1px 3px 6px rgba(0, 0, 0, 0.7);
  box-shadow: inset 0px 0px 30px rgba(0, 0, 0, 0.5);
}

#btn1 {
  background-color: red;
}

#btn2 {
  background-color: blue;
}

#btn3 {
  background-color: green;
}

#btn4 {
  background-color: #fff;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  height: 50px;
  width: 100px;
  color: #000;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.7);
  float: right;
}

Answer 1

问题是您在表单上使用绝对定位。如果把它变成相对问题就会解决。我相信你这样做是为了将你的表单集中在页面上，你可以通过使用以下css来实现相同的结果：

position: relative;
display: block;
margin: 0 auto; //centers horizontionally;
margin-top: 30%; // same margin before;
max-width: 500px; //I also suggest limiting max width of form so if your inputs are not limited this will limit them

元素出现在不同页面的不同位置

1 个答案: