【问题标题】:Why does CSS not move content & html from php echos output?为什么 CSS 不将内容从 php echo 输出移动到 html?
【发布时间】:2018-01-06 11:05:42
【问题描述】:

使用 require_once(); 从另一个页面加载 php。提交表单后,php 所做的就是在页面上回显一些文本。 (不在下方)CSS 在同一页面上。边距、宽度背景颜色和填充声明确实有效,但顶部和文本对齐无效。这是为什么呢?

<?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;
}

如果我把这篇文章发错了地方或者我的标题格式不正确,请原谅我。我可以删除或重述问题。如果需要,我还可以添加所有代码。非常感谢

编辑

整个html代码

<!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>

【问题讨论】:

  • PHP 无关紧要,CSS 只处理生成的 HTML。
  • 您是否在使用任何 CSS 库,例如 Bootstrap 或 Foundation?如果是这样,他们会添加自己的 CSS 规则。为了覆盖它们,使用关键字“!important”。
  • @aendeerei 不,我不是
  • 如何让所有 DIV 的顶部都位于容器的同一 55% 处?
  • 在您的 CSS 中,顶部和边距顶部相互冲突。

标签: php html css


【解决方案1】:

1.) 你的&lt;div class='results'&gt; 是(根据 CSS 定义)20% 宽。文本居中发生在这 20% 的内部,DIV 本身很可能会保持左对齐,总而言之,这看起来不像居中的文本。您可能想要删除 20% 的宽度。

2.) top: 55% 需要为其父容器定义高度才能生效。

【讨论】:

    【解决方案2】:

    其他用户已经告诉过你什么不太合适。我也会提供一些建议和代码。

    • 使用面向对象的mysqli。不过我建议使用 PDO。
    • 使用prepared statements 避免SQL 注入。也请阅读this
    • 添加适当的“元”标签,然后是“标题标签”。
    • 在 html 的“head”部分内不应找到任何内容输出。它属于“身体”部分。
    • 忘记&lt;center&gt; 标签,只使用“text-align: center”(+“position: relative”,如果需要)css 规则。阅读Centering in CSS: A Complete Guide
    • 在“search.php”代码之上需要“phpsearchcode.php”。
    • 在“phpsearchcode.php”中,将所有数据提取到一个数组($results)中,然后关闭结果、语句,最终关闭连接。然后,您将遍历 search.php html 代码中的 $results 数组。通过这样做,您可以避免将数据库获取代码与 html 输出代码混合(就像您所做的那样)。原理:上面取数据,下面显示结果。这么说吧。这样,您还可以避免从 PHP 打印 html 标签(使用“echo”或类似的)。
    • 添加一个容器(“results-container”)来保存结果行。这样您就可以将容器作为一个整体放置在您希望的位置(通过可能对其应用“顶部:55%”和“宽度:20%”规则 - 而不是它的内容行)。内容行本身应仅成为“填充”、“边距”和“文本对齐:居中”规则。 "text-align: center" 将应用于 "results" div 内的文本。

    祝你好运。

    phpsearchcode.php

    <?php
    
    // Db configs.
    define('HOST', 'localhost');
    define('PORT', 3306);
    define('DATABASE', 'R');
    define('USERNAME', 'root');
    define('PASSWORD', '');
    
    /*
     * Error reporting.
     * 
     * @link http://php.net/manual/en/function.error-reporting.php
     * @link http://php.net/manual/en/function.set-error-handler.php
     * @link http://php.net/manual/en/function.set-exception-handler.php
     * @link http://php.net/manual/en/function.register-shutdown-function.php
     */
    error_reporting(E_ALL);
    ini_set('display_errors', 1); // SET IT TO 0 ON A LIVE SERVER!
    
    if (isset($_POST['search'])) {
        /*
         * Enable internal report functions. This enables the exception handling, 
         * e.g. mysqli will not throw PHP warnings anymore, but mysqli exceptions 
         * (mysqli_sql_exception). They are catched in the try-catch block.
         * 
         * MYSQLI_REPORT_ERROR: Report errors from mysqli function calls.
         * MYSQLI_REPORT_STRICT: Throw a mysqli_sql_exception for errors instead of warnings. 
         */
        $mysqliDriver = new mysqli_driver();
        $mysqliDriver->report_mode = (MYSQLI_REPORT_ERROR | MYSQLI_REPORT_STRICT);
    
        /*
         * Create a new db connection.
         * 
         * @see http://php.net/manual/en/mysqli.construct.php
         */
        $connection = new mysqli(HOST, USERNAME, PASSWORD, DATABASE, PORT);
    
        // Get submitted values.
        $search = '%' . $_POST['search'] . '%';
    
        /*
         * The SQL statement to be prepared. Notice the so-called markers, 
         * e.g. the "?" signs. They will be replaced later with the 
         * corresponding values when using mysqli_stmt::bind_param.
         * 
         * @link http://php.net/manual/en/mysqli.prepare.php
         */
        $sql = 'SELECT username 
                FROM userinfo 
                WHERE username LIKE ?';
    
        /*
         * Prepare the SQL statement for execution - ONLY ONCE.
         * 
         * @link http://php.net/manual/en/mysqli.prepare.php
         */
        $statement = $connection->prepare($sql);
    
        /*
         * Bind variables for the parameter markers (?) in the 
         * SQL statement that was passed to prepare(). The first 
         * argument of bind_param() is a string that contains one 
         * or more characters which specify the types for the 
         * corresponding bind variables.
         * 
         * @link http://php.net/manual/en/mysqli-stmt.bind-param.php
         */
        $statement->bind_param('s', $search);
    
        /*
         * Execute the prepared SQL statement.
         * When executed any parameter markers which exist will 
         * automatically be replaced with the appropriate data.
         * 
         * @link http://php.net/manual/en/mysqli-stmt.execute.php
         */
        $executed = $statement->execute();
    
        /*
         * Get the result set from the prepared statement.
         * 
         * NOTA BENE:
         * Available only with mysqlnd ("MySQL Native Driver")! If this 
         * is not installed, then uncomment "extension=php_mysqli_mysqlnd.dll" in 
         * PHP config file (php.ini) and restart web server (I assume Apache) and 
         * mysql service. Or use the following functions instead:
         * mysqli_stmt::store_result + mysqli_stmt::bind_result + mysqli_stmt::fetch.
         * 
         * @link http://php.net/manual/en/mysqli-stmt.get-result.php
         * @link https://stackoverflow.com/questions/8321096/call-to-undefined-method-mysqli-stmtget-result
         */
        $result = $statement->get_result();
    
        /*
         * Fetch data and save it into an array - to be looped through in the later html code.
         * 
         * 
         * @link http://php.net/manual/en/mysqli-result.fetch-all.php
         */
        $results = $result->fetch_all(MYSQLI_ASSOC);
    
        /*
         * Free the memory associated with the result. You should 
         * always free your result when it is not needed anymore.
         * 
         * @link http://php.net/manual/en/mysqli-result.free.php
         */
        $result->close();
    
        /*
         * Close the prepared statement. It also deallocates the statement handle.
         * If the statement has pending or unread results, it cancels them 
         * so that the next query can be executed.
         * 
         * @link http://php.net/manual/en/mysqli-stmt.close.php
         */
        $statement->close();
    
        /*
         * Close the previously opened database connection.
         * 
         * @link http://php.net/manual/en/mysqli.close.php
         */
        $connection->close();
    }
    

    search.php

    <?php
    require_once('phpsearchcode.php');
    ?>
    <!DOCTYPE html>
    <html>
        <head>
            <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
            <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes" />
            <meta charset="UTF-8" />
            <!-- The above 3 meta tags must come first in the head -->
    
            <title>RS search</title>
    
            <style type="text/css">
                /**************/
                /* Base rules */
                /**************/
    
                html,body {
                    background-color: #282C35;
                    color: white;
                    margin: 0px;
                }
    
                a {
                    text-decoration: none;
                    color: #C4C4C4;
                }
    
                input {
                    background-color: #282C35;
                }
    
                /****************/
                /* Layout rules */
                /****************/
    
                .results-container {
                    /* ... */
                }
    
                .results {
                    background-color: #36393E;
                    width: 20%;
                    text-align: center;
                    padding-bottom: 30px;
                    padding-top: 10px;
                }
    
                #logo {
                    top:40%;
                    position: absolute;
                    right: 33%;
                }
    
                #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>
        </head>
        <body>
    
            <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>
    
            <?php
            if (isset($_POST['search'])) {
                ?>
                <h3>
                    Results list
                </h3>
    
                <div class="results-container">
                    <?php
                    if (isset($results) && $results) {
                        foreach ($results as $row) {
                            $username = $row['username'];
                            ?>
                            <div class="results">
                                <?php echo $username; ?>
                            </div>
                            <?php
                        }
                    } else {
                        ?>
                        <div class="noresults">
                            No users found!
                        </div>
                        <?php
                    }
                    ?>
                </div>
                <?php
            }
            ?>
    
        </body>
    </html>
    

    【讨论】:

      【解决方案3】:

      由于您在所有 html 元素之上打印了 output,因此 .results 没有与其相关的父元素。 所以将position 更改为absolute 并定义topleft

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

      并避免使用&lt;center&gt; 元素,因为html 5 不支持它。

      【讨论】:

      • 谢谢,可惜还是没有居中
      • @yebulosij 能否请您添加 Html 代码以查看围绕此的整个元素。
      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2021-03-17
      • 1970-01-01
      • 2023-03-29
      • 2021-05-14
      相关资源
      最近更新 更多