CSS/HTML 如何在网页的特定位置显示表单数据答案

【问题标题】：CSS/HTML How To Display Form Data On A Specific Spot On The Web PageCSS/HTML 如何在网页的特定位置显示表单数据
【发布时间】：2018-09-25 12:00:00
【问题描述】：

我有一个网页，它在页面左侧显示数据，并在列表中向下显示。

我需要使用 CSS 在页面中间/右侧显示表单的帮助。使用我为表单提供的当前 CSS，它显示在页面底部，这是错误的，我希望它位于中间/右侧。该表单基本上是一个搜索字段，用户可以在其中搜索网站上的成员。

我不擅长 CSS，也许有人也可以为表单推荐一个很酷的样式？ :D

名为 searchList 的 div 类是我要对齐到中间/右侧的表单

我的代码：

<?php
include('init.inc.php');

$output = '';

if(isset($_POST['search'])){
    $searchq = $_POST['search'];
    $searchq = preg_replace("#[^0-9a-z]#i","",$searchq); //filter, can remove

    $query = mysql_query("SELECT * FROM users WHERE user_first LIKE '%$searchq%' OR user_last LIKE '%$searchq%' OR user_uid LIKE '%$searchq%'");
    $count = mysql_num_rows($query);

    if($count == 0){
        $output = 'There was no search found!';
    }else{
        while($row = mysql_fetch_array($query)){
            $uname = $row['user_uid'];
            $fname = $row['user_first'];
            $lname = $row['user_last'];
            $email = $row['user_email'];
            $id = $row['user_id'];

            $output .= '<div> '.$uname.' '.$fname.' '.$lname.' '.$email.'</div>';
        }
    }

}
?>

<!DOCTYPE html PUBLIC "-//W3C/DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns=""http://www.w3.org/1999/xhtml>
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <link rel="stylesheet" href="./css/style.css">
  </head>
  <body>
     <section id="showcase1">
        <section id="newsletter">
          <div class="container">
             <h1>ProjectNet Members:</h1>
          </div>
        </section>
        <div class="container">
           <div class="userList">
            <?php
               foreach (fetch_users() as $user){
                ?>
                <p>
                    <button><a class="userList" href="profile.php?uid=<?php echo $user['id']; ?>"><?php echo $user['username']; ?></a></button>
                </p>
                <?php

               }
            ?>
           </div>
       </div>
       <div class="searchList">
           <form id="search" action="user_list.php" method="post">
               <input type="text" name="search" placeholder="Search for members..." />
               <input type="submit" value="Search" />
           </form>
           <?php print("$output");?>
       </div>
    </section>
  </body> 
</html>

CSS：

.searchList {
    color: #ffffff;
    text-decoration: none;
    font-weight: bold;
    font: 20px Arial, Helvetica,sans-serif;
    text-align: center;

}

更新：我设法将表格放在屏幕中间，我需要帮助将其稍微向右移动。

CSS：

.searchList {
    color: #ffffff;
    text-decoration: none;
    font-weight: bold;
    font: 19px Arial, Helvetica,sans-serif;
    text-align: center;
    left: 0;
    line-height: 35px;
    margin: auto;
    margin-top: -100px;
    position: absolute;
    top: 50%;
    width: 100%;
    float: right;
}


#search input[type="submit"] {
    cursor: pointer;

    border: none;
    background: #fafafa;
    color: #333;
    font-weight: bold;
    margin: 0 0 5px;
    padding: 3px;
    font-size: 15px;
    font: Arial, Helvetica,sans-serif;
}
#search input[type="text"] {
    width: 18%;
    border: 1px solid #CCC;
    background: #FFF;
    margin: 0 0 5px;
    padding: 4px;
}
}
#search input[type="submit"]:hover {
    background: #e8491d;
    color: #fafafa;
    -webkit-transition: background 0.3s ease-in-out;
    -moz-transition: background 0.3s ease-in-out;
    transition: background-color 0.3s ease-in-out;
}

【问题讨论】：

查看bootstrap。它是一个 html/css 框架，用于帮助页面布局和常用元素

标签： php html css forms alignment

【解决方案1】：

使用 CSS 位置属性或浮动属性。要在页面右侧显示表单，请使用float : right;

form {
 float : right;
}

【讨论】：

这对我不起作用，我已经设法让表格保持在中间，你知道如何将它稍微向右移动吗？我已经更新了我上面的帖子以包含新的 CSS 代码 :)

【解决方案2】：

向右移动，其中第 4 个值是左侧填充。填充：0px 0px 0px 30px； ..或者你可以使用。 padding-left: 30px;

如果您想更好地控制布局结构，我建议您使用嵌入在 css 中的“网格”。搜索“css 网格”。

【讨论】：