Question

我有一个网站，左侧显示一个用户帐户列表，列在可点击的链接（超链接）中，可以转到用户的个人资料页面。此外，我在页面中间有一个搜索字段（表单），用户可以在其中搜索某人。但是，由于该搜索字段，左侧显示的与此字段对齐的用户名将被破坏，您无法再单击它们。未与搜索字段对齐并且在其对齐下的超链接有效。经过故障排除后，我发现我的CSS代码中的这个字段是它的原因：position：absolute;

从CSS代码中取出该字段会破坏我的搜索字段在页面中间的位置，并将其放置在页面底部。

我不知道如何解决这个问题而不会破坏我在页面上的内容定位。

我的代码：

<?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">
        <h2>Search for members</h2>
        <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：这是在页面中间搜索字段的CSS

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

}


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

CSS：这是页面左侧用户列表的CSS

.userList {
    color: #ffffff;
    text-decoration: none;
    font-weight: bold;
    font: 20px Arial, Helvetica,sans-serif;
    margin: auto;
}
.userList button {
    background: #333;
    width: 20%;
}

Answer 1

没有提供大量信息，如果没有图像，很难想象，但我的猜测是z索引问题。

下面你可以看到div从左到右（宽度100％）。我假设这个div基于提供的css位于userList div的顶部。这意味着您可能无法单击searchList div下面的超链接。

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

尝试将z-index设置为高于searchList的userlist div，以便您可以单击超链接。

.userList {
    color: #ffffff;
    text-decoration: none;
    font-weight: bold;
    font: 20px Arial, Helvetica,sans-serif;
    margin: auto;
    z-index: 1000;
}

绝对定位将searchList div置于中心，而不会影响正文中的其他div。当你删除它时，searchList div移动到底部，因为这是它在正文中的位置。

CSS / HTML超链接从表单CSS中断

1 个答案: