php 文件不接受 css答案

【问题标题】：php file does not accept cssphp 文件不接受 css
【发布时间】：2019-01-29 03:44:00
【问题描述】：

我写了一个关于 php 的联系表。我希望输入字段和文本输出居中。由于我使用表单标签创建了输入字段，我认为如果我在带有表单标签的 CSS 文件中插入居中就足够了。但是，该位置会忽略 CSS 文件（页面上的所有其他设置都在 CSS 文件之上）。可能是什么原因？

我已经尝试过.form、#form 和只有form，但是没有效果

CSS：

form { 
    width:300px;
    height:160px;
    position:absolute;
    top:50%;
    left:50%;
    margin-top:-80px;
    margin-left:-150px;
    border:1px solid black;
}

HTML：

 <head>
   <link rel="stylesheet" href="css/style.css">
 </head>
 <form action="" method="post">
      <input type="text" name="betreff" placeholder="Betreff?"><br>
      <textarea name="nachricht" placeholder="Ihre Nachricht!"> 
      </textarea><br>
      <input type="submit" name="submit" value="Absenden!"><br>
 </form>

PHP：

<?php

if(isset($_POST['submit'])):
    $betreff = $_POST['betreff'];
    $nachricht = $_POST['nachricht'];
    $absenden = $db->prepare("INSERT INTO kontakt(betreff,nachricht,datum) VALUES (?,?,NOW())");
    $absenden->bind_param('ss',$betreff,$nachricht);
    $absenden->execute();
endif;

$abfrage = $db->query("SELECT * FROM kontakt ORDER BY datum DESC");

echo 'Es wurden '.$abfrage->num_rows.' Nachrichten gefunden!<br>';

while($ausgabe = $abfrage->fetch_object()){
    echo '<b>Betreff:</b> '.$ausgabe->betreff.' <br>
          <b>Nachricht:</b><br> '.$ausgabe->nachricht.' <br>
          <hr>';
}

实际上，我希望将联系表放在中间，但如果他能对 CSS 声明做出反应，我会很高兴。如前所述，只省略了联系表格。其余的工作。

【问题讨论】：

表单提交会创建一个完全不同的 HTML 页面以发送到浏览器。 form 的 CSS 规则不会涵盖无关的流文本。使用 view-source 看看你得到了什么。
@mario 你是什么意思：Use view-source to see what you got.?
应用语义正确的html页面结构
@sharete 你确定"css/style.css" 加载了吗？按Ctrl + Shift + I 在控制台中查看任何 404 错误。
@Raphael 你能说得具体一点吗？

标签： php html css

【解决方案1】：

Form 默认为inline，因此所有margin、width 和height css 都不会以您想要的方式影响它。您需要添加：

display:block;

到你的CSS。

另一件事是left:50% 无法正确居中（我想这就是您使用margin 更正的原因），建议使用margin: auto，或margin-left:auto，margin-right:auto。这样您就不需要手动更正它（注意：这不会影响垂直对齐）。如果不设置正确的absolute / relative 定位相关性，它可能无法工作。

完全不同的居中方式是将它们放入表格中，其中一个单元格的垂直和水平对齐设置为center / middle。您需要将 html,body 元素 width 和 height 设置为 100% 以及表格尺寸。该方法是一种解决方法，但即使在较旧的浏览器上也能完美运行。请注意，在这种情况下，form 必须保留为inline，因此如果您要使用这种方式，请不要添加display:block。

【讨论】：

【解决方案2】：

您拥有的唯一定位信息是将表单定位在页面上。没有输入可以正确继承的对齐信息。我建议在你的 CSS 文件中设置 INPUT 样式，而不是依赖 FORM 样式来获得你想要的。将 INPUT 与 FORM 分开设置也会在以后为您提供更多控制权。

【讨论】：