时间戳

首页 > 解决方案 > 提交按钮大小错误

php - 提交按钮大小错误

问题描述

我有一个“失物招领网站”，它显示数据库中的物品。网站的表单格式正确，但单击按钮时会变得非常大。

body {
  /* apply styling to everything in body */
  margin: 0;
  /* use all of the page */
  font-family: Helvetica, Arial, sans-serif;
  /* set primary font to Helvetica, secondary to Arial, and if none are availible use a san-serif font */
  background-color: #fff;
  /* set background colour to white */
  font-size: 18px;
  /* set default font size is 18px */
}

.navigation {
  /* navigation bar styling */
  position: fixed;
  /* attach bar to static position */
  top: 0;
  /* spread to full */
  left: 0;
  right: 0;
  background-color: orange;
  /* make navigation bar div orange */
  z-index: 1/* place on top of all content */
}

.navigation a {
  float: left;
  /* move links to left */
  color: #fff;
  /* text colour white */
  text-align: center;
  /* align links centre of their boxes */
  padding: 14px 16px;
  /* add padding to boxes */
  text-decoration: underline;
  /* add underline to links for platform conventions */
  position: relative;
  /* move links one after the other */
}

.navigation a:hover {
  /* when link is hovered over, make background lighter */
  background-color: #ffc864;
}

.right a {
  /* ability move links to the right side of navaigation bar div */
  float: right;
}

.header {
  /* title and image */
  position: relative;
  top: 5%;
  /* add borders */
  left: 5%;
  right: 15%;
  width: 70%;
  /* define size */
  padding-top: 50px;
}

.header img {
  max-width: 225px;
  /* max size of image */
  float: left;
}

.header h1 {
  padding-left: 30px;
  padding-bottom: 30px;
}

.gallery {
  /* image gallery div styling */
  left: 5%;
  width: 90%;
  position: relative;
}

input {
  /* input field styling */
  border-radius: 5px;
  border: none;
  width: 100%;
  font-size: 18px;
  margin-bottom: 15px;
  height: 30px;
}

.submit {
  /* button styling */
  padding-left: 0;
  font-size: 18px;
  height: 30px;
  text-align: center;
  position: relative;
}

.form {
  /* form div styling */
  position: relative;
  width: 75%;
  height: 100%;
  left: 12.5%;
  background-color: #d3d3d3;
  padding: 25px;
  margin-bottom: 50px;
}

* {
  box-sizing: border-box;
}

input[type=text] {
  border: 1px solid #ccc;
  border-radius: 4px;
  resize: vertical;
  padding-left: 12px;
}

input[type=file] {
  border: none;
  border-radius: 4px;
  height: 100%;
}

input[type=submit] {
  background-color: orange;
  color: #fff;
  padding: 12px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  height: 100%;
}

input[type=submit]:hover {
  background-color: #ffa07a;
}


/* code to make gallery images scale well for all screens */

@media screen and (max-width:600px) {
  input[type=submit] {
    width: 100%;
    margin-top: 0;
  }
}

div.image {
  margin: 10px;
  display: inline-block;
  vertical-align: middle;
}

div.image img {
  width: 100%;
  height: auto;
  border: 1px solid #ccc;
}

@media screen and (min-width:1224px) {
  div.image {
    width: 300px;
  }
}

@media screen and (min-width:1044px) and (max-width:1224px) {
  div.image {
    width: 250px;
  }
}

@media screen and (min-width:845px) and (max-width:1044px) {
  div.image {
    width: 200px;
  }
}

.image a {
  /* make image links follow platform conventions */
  color: inherit;
  text-decoration: underline;
}


/* full screen images */

.lightbox {
  /** Default lightbox to hidden */
  display: none;
  /** Position and style */
  position: fixed;
  z-index: 999;
  width: 100%;
  height: 100%;
  text-align: center;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.8);
}

a {
  color: white;
  text-decoration: none;
}

.lightbox img {
  /** Pad the lightbox image */
  max-width: 90%;
  max-height: 80%;
  margin-top: 5vh;
}

.lightbox:target {
  /** Remove default browser outline */
  outline: none;
  /** Unhide lightbox **/
  display: block;
}
<!-- Declaration tags for the browser to know what to read, and what language -->
<!DOCTYPE html>
<html lang="en">

<!-- Back end code -->

<head>
  <title>Lost Property</title>
  <!-- title for website -->
  <link rel="stylesheet" type="text/css" href="assets/main.css">
  <!-- link to css -->
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- define size -->
  <?php
    session_start();
    include("config.php"); // include configuration to connect to database

    $dbconnect = mysqli_connect(DB_HOST, DB_USERNAME, DB_PASSWORD, DB_NAME);  // connect to database

    // if can't connect display error
    if (mysqli_connect_errno()) {
        echo "Connection failed:" . mysqli_connect_error();
        exit;
    }

    // define variables from database to use later in PHP code
    $showall_sql = "SELECT * FROM `images` ORDER BY `images`.`ID` ASC";
    $showall_query = mysqli_query($dbconnect, $showall_sql);
    $showall_rs = mysqli_fetch_assoc($showall_query);
    $count = mysqli_num_rows($showall_query);
    ?>
</head>

<!-- main page content -->

<body>
  <!-- navigation bar -->
  <div class="navigation">
    <!-- links -->
    <a href="index.php">Home</a>
    <a href="search.php">Search</a>
    <a href="upload.php">Upload</a>
    <div class="right"><a href="about.php">About</a></div>
    <!-- has float:right property for to move to side -->
  </div>

  <!-- header -->
  <div class="header">
    <img src="assets/logo.jpg" alt="Logo">
    <!-- image of logo, alt tags for screen readers -->
    <h1>Lost Property</h1>
  </div>


  <?php

    $sql = "SELECT * FROM lost_property";
    if (!empty($_POST)) {
        $name = mysqli_real_escape_string($dbconnect, htmlspecialchars($_POST['name']));
        $item = mysqli_real_escape_string($dbconnect, htmlspecialchars($_POST['item']));
        $sql = "SELECT * FROM lost_property WHERE name LIKE '%$name%' AND item LIKE '%$item%' ORDER BY name ASC";
    }
    $result = $dbconnect->query($sql);
    ?>

    <body>
      <div class="form">
        <label>Search</label>
        <form action="" method="POST">
          <input type="text" placeholder="Type the name here" name="name">&nbsp;
          <select name="item" class="dropdown">
            <option value="" disabled selected>item:</option>
            <?php
                    $item_sql = "SELECT * FROM `lost_property` ORDER BY item ASC ";
                    $item_query = mysqli_query($dbconnect, $item_sql);
                    $item_rs = mysqli_fetch_assoc($item_query);

                    do {

                    ?>

              <option value="<?php echo $item_rs['item']; ?>">
                <?php echo $item_rs['item']; ?>
              </option>

              <?php

                    } while ($item_rs = mysqli_fetch_assoc($item_query));

                    ?>
          </select>&nbsp;
          <input type="submit" value="Search" name="btn">
      </div>
      </form>
      <div class="gallery">
        <h2>Found property:</h2>
        <?php
            //check for results. If there are none display error
            if ($count < 1) {
            ?>

          <div class="error">
            <h1>No results were found.</h1>
          </div>

          <?php

            } //end if

            else {

                while ($search_rs = $result->fetch_assoc()) {


                ?>

            <!-- display image and information from database and show in gallery  -->
            <div class="image">
              <h3>
                <?php echo $search_rs['name']; ?>
              </h3>
              <h3>
                <?php echo $search_rs['item']; ?>
              </h3>
              <p>
                <?php echo $search_rs['location']; ?>
              </p>
            </div>

            <?php
                } // end of do

            } //end else

            //if there are any display

            ?>
      </div>
    </body>

</html>

显然没有附加的数据库有点难以分辨，但是为什么搜索按钮会变得很大呢？

是 PHP 正在改变大小，还是正在调整以适应某些东西？

标签： phphtmlcss

解决方案

您应该使用显示打开和关闭标签的编辑器。在您的代码中有几个错误应该会导致几个问题，这部分尤其是：

 <body> <--- You open a second Body tag here! Only use one
  <div class="form"> <--- start of your div
    <label>Search</label>
    <form action="" method="POST"> <--- start of your form INSIDE the div
      <input type="text" placeholder="Type the name here" name="name">&nbsp;
      <select name="item" class="dropdown">
        <option value="" disabled selected>item:</option>
        <?php
                $item_sql = "SELECT * FROM `lost_property` ORDER BY item ASC ";
                $item_query = mysqli_query($dbconnect, $item_sql);
                $item_rs = mysqli_fetch_assoc($item_query);

                do {

                ?>

          <option value="<?php echo $item_rs['item']; ?>">
            <?php echo $item_rs['item']; ?>
          </option>

          <?php

                } while ($item_rs = mysqli_fetch_assoc($item_query));

                ?>
      </select>&nbsp;
      <input type="submit" value="Search" name="btn">
  </div> <-- div closes before the form which is INSIDE the div
  </form> <-- form closes after div, wrong way around!

所以我强烈建议你练习一下如何使代码更干净，这样你就会注意到这样的错误。

例子：

<div class="main-container">
   <div class="form-container">
      <form>
        <input type="text" placeholder="Testinput">
        <input type="submit" value="search" id="submitbutton">
      </form>
   </div>
</div>

基本上：避免不必要的空白，在同一级别对齐开始和结束标签。有了这些信息，您应该能够重新排列代码并自己修复 Button-Bug。

推荐阅读