douhuzhi0907 2018-01-06 00:29
浏览 37

为什么CSS不能从php echos输出中移动内容和html？

The php is loaded from another page using require_once();. What the php does is echo some text onto the page once a form is submitted. (not below) The CSS is on this same page. The margin, width background-color and padding declarations do work, but top, and text align do not. Why is this?

<?php
    $connection = @mysqli_connect("localhost","root","","R");
    if($connection->connect_error){//show error if not connection failed
        die("Connection failed: " . $connection->connect_error);
    }
    $sql="SELECT username FROM userinfo WHERE username LIKE '%" . $_POST['search'] . "%';";
    $res=$connection->query($sql);
    while($row=$res->fetch_assoc()){
        echo "<div class='results'><center> Username: " . $row['username'] . "</center></div>";
    }
    mysqli_close($connection);
?>

CSS

.results {
  position: relative;
  top: 55%;
  margin-top: 0px;
  margin-bottom: 0px;
  background-color: #36393E;
  width: 20%;
  text-align: center;
  padding-bottom: 30px;
  padding-top: 10px;
}

If I've posted this in the wrong place or incorrectly formatted my title, please forgive me. I can delete or restate the question. I can also add all the code if needed. Thank you so much

Edit

The entire html code

<!DOCTYPE HTML>
<head>
<?php
require_once('phpsearchcode.php');
?>
<style>
.results {
  position: relative;
  top: 55% !important;
  margin-bottom: 0px;
  background-color: #36393E;
  width: 20%;
  text-align: center !important;
  padding-bottom: 30px;
  padding-top: 10px;
}
a {
  text-decoration: none;
  color: #C4C4C4;
}
#logo {
  top:40%;
  position: absolute;
  right: 33%;
}
html,body {
  background-color: #282C35;
  color: white;
  margin: 0px;
}
input {
  background-color: #282C35;
}
#rat {
  background-color: white !important;
  border: 0px;
  transform: translate(-50%,-50%);
  position: absolute;
  top: 50%;
  right:30%;
  padding: 20px;
}
#bug {
  border: 0px;
  background-color: white;
  transform: translate(-50%,-50%);
  position: absolute;
  top: 50%;
  padding: 20px;
  width:350px;
}

</style>
<title>
  RS search
</title>
</head>
<body>
<center>
  <img src="rs.png" id="logo"/><br />
  <form action="search.php" method="post">
    <input type="text" name="search" id="bug">
    <input type="submit" name="submit" value="search" id="rat">
  </form>
</center>
</body>
</html>
  • 写回答

3条回答 默认 最新

  • douyousu9691 2018-01-06 00:40
    关注

    since you print the output on top of all html elements so .results doesn't have a parent element to be relative to it . so change the position to absolute and define the top and left values 

    .results {
  position: absolute;
  top: 55%;
  left: 40%;
  margin-bottom: 0px;
  background-color: #36393E;
  width: 20%;
  text-align: center;
  padding-bottom: 30px;
  padding-top: 30px;
}

    and avoid using <center> element as it is not supported in html 5 .

    评论

报告相同问题？