dongyin2885 2019-01-28 18:59
浏览 73
已采纳

php文件不接受css

I have written a contact form about php. I would like the input fields and the text output to be centered. Since I created the input fields with the form tag, I thought it would be sufficient if I insert the centering in the CSS file with the form tag. However, the place ignores the CSS file (all other settings on the page work above the CSS file). What could be the reason?

I've already tried .form, #form and only form, but has no effect

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

Actually I would like to have the contact form in the middle, but I would be glad if he would react to the CSS statement at all. As already said, only the contact form is left out. The rest works.

  • 写回答

2条回答 默认 最新

  • dongyan5141 2019-01-28 19:26
    关注

    Form is inline by default, so all the margin, width and height css won't affect it the way you want. You need to add:

    display:block;

    to your css.

    The other thing is that left:50% won't center it properly (I guess that is why You have used the margin correction), would suggest to use margin: auto, or margin-left:auto, margin-right:auto. That way you won't need to correct it manually (note: that won't affect the vertical align). It is possible that it won't work without setting the proper absolute / relative positioning correlation.

    Totally different way of centering things is to put them into the table with one cell with vertical and horizontal align set to center / middle. You need to set your html,body elements width and height to 100% as well as table dimensions. The way is a bit of workaround, but it works perfectly even on older browsers. Please note that in that case the form has to stay inline, so don't add display:block if you gonna use that way.

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题?

悬赏问题

  • ¥15 目详情-五一模拟赛详情页
  • ¥15 有了解d3和topogram.js库的吗?有偿请教
  • ¥100 任意维数的K均值聚类
  • ¥15 stamps做sbas-insar,时序沉降图怎么画
  • ¥15 买了个传感器,根据商家发的代码和步骤使用但是代码报错了不会改,有没有人可以看看
  • ¥15 关于#Java#的问题,如何解决?
  • ¥15 加热介质是液体,换热器壳侧导热系数和总的导热系数怎么算
  • ¥100 嵌入式系统基于PIC16F882和热敏电阻的数字温度计
  • ¥15 cmd cl 0x000007b
  • ¥20 BAPI_PR_CHANGE how to add account assignment information for service line