Question

我正在从MySQL插入和检索数据，将其发布到屏幕上，但所有条目，但第一个条目都在我的文档区域之外！这是php / html：

 <?php
require_once "functions.php";

echo "<!DOCTYPE html><html><head>" .
     "<title>Add Glossary Terms: Yadah and the Hunter</title>" .
     "<link rel='stylesheet' type='text/css' href='ex_col.css'>" .
     "<link rel='stylesheet' type='text/css' href='styles.css'>";

if (isset($_POST['delete']) && isset($_POST['id']))
  {
    $id   = get_post($conn, 'id');
    $query  = "DELETE FROM glossary WHERE def='$id'";
    $result = $conn->query($query);
    if (!$result) echo "DELETE failed: $query<br>" .
      $conn->error . "<br><br>";
  }

  if (isset($_POST['term'])   &&
     isset($_POST['pronoun'])   &&
      isset($_POST['def'])) 
  {
    $term   = get_post($conn, 'term');
    $pronoun = get_post($conn, 'pronoun');
    $def    = get_post($conn, 'def');

    $query    = "INSERT INTO glossary VALUES" .
      "('', '$term', '$pronoun', '$def')";
    $result   = $conn->query($query);

    if (!$result) echo "INSERT failed: $query<br>" .
      $conn->error . "<br><br>";
  }
echo "</head><main><h1>Add Entries</h1>"; 
echo <<<_END

<form action="add_entries.php" method="post">
<pre>
<b>Term:</b>              <input type="text" name="term">
<b>Pronounciation:</b>       <input type="text" name="pronoun"><br>
<b>Definition:</b>           <textarea name="def"></textarea><br>
<input type="submit" value="ADD GLOSSARY TERM">
</pre></form>
_END;

  $query  = "SELECT * FROM glossary";
  $result = $conn->query($query);
  if (!$result) die ("Database access failed: " . $conn->error);

  $rows = $result->num_rows;

  for ($j = 0 ; $j < $rows ; $j++)
  {
    $result->data_seek($j);
    $row = $result->fetch_array(MYSQLI_NUM);

    echo <<<_END

  <p>
    <b>Term $row[0]</b><br><br>
    <b>$row[1]</b><br></div>
    <b>$row[2]</b><br>
    <div class="indent">$row[3]</div>

    <form action="add_entries.php" method="post">
    <input type="hidden" name="delete" value="yes">
    <input type="hidden" name="id" value="$row[0]">
    <input type="submit" value="DELETE RECORD"></form>  <br>

   </p>
  <section>
    <h3>Yadah and the Hunter: Add Entries</h3>
  </section>
</main>
_END;
 }  
  $result->close();
  $conn->close();

  function get_post($conn, $var)
  {
    return $conn->real_escape_string($_POST[$var]);
  }
?>
<a href="ex_col.php">View Glossary</a>
 </body>
 </html>

和css：

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700);

body {
  font-family: "Open Sans", Arial;
  background: #CCC;
}
main {
  background: #EEE;
  width: 600px;
  margin: 20px auto;
  padding: 10px;
  box-shadow: 0 3px 5px rgba(0,0,0,0.3);
}
h1 {
  text-align: center;
}
h3 {
  text-align: center;
  /*border-top: 1px solid #CCC;*/
}
form {
    position:left;

}

p {
  font-size: 13px;
}
.indent {
    text-indent: 10px;
}
.input {
  display: none;
  visibility: hidden;
}
.term {
    text-align: left;
    padding:10px 10px 0px 10px;
}
#form {
    padding: 0px 10px;
}
a {
    text-align:center;
}
label {
  display: block;
  padding: 0.5em;
  text-align: center;
  border-top: 1px solid #CCC;
  border-bottom: 1px solid #CCC;
  color: #666;
}
label:hover {
  color: #000;
}
/*#def {
    width: 500px;
    padding:10px;
    clear:both;
}*/
pre {
    display:block;
}
label::before {
  font-family: Consolas, monaco, monospace;
  font-weight: bold;
  font-size: 15px;
  content: "+";
  vertical-align: text-top;
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-right: 3px;
  background: radial-gradient(ellipse at center, #CCC 50%, transparent 50%);
}
#expand {
  height: 0px;
  overflow: hidden;
  transition: height 0.5s;
 /* background: url(http://placekitten.com/g/600/300); */
  color: #000;
}
section {
  padding: 0 20px;
}
#toggle:checked ~ #expand {
  height: 250px;
}
#toggle:checked ~ label::before {
  content: "-";
}

我怎样才能让第2条和第2条直接出现在第一节中的第一项下面？我无法弄清楚问题出在哪里！感谢

Answer 1

<p>
<b>Term $row[0]</b><br><br>
<b>$row[1]</b><br></div>// WHICH DIV CLOSED HERE????
<b>$row[2]</b><br>
<div class="indent">$row[3]</div>

<form action="add_entries.php" method="post">
<input type="hidden" name="delete" value="yes">
<input type="hidden" name="id" value="$row[0]">
<input type="submit" value="DELETE RECORD"></form>  <br>

创建的html不合适。存在额外的div结尾。尝试验证您的结果html。例如。您可以使用https://validator.w3.org/上的页面视图源html进行验证。

Mysql数据不会留在<main>区域

1 个答案: