CSS / HTML Как отображать данные формы в определенном месте на веб-странице
У меня есть веб-страница, которая отображает данные в левой части страницы, и она идет вниз в списке.
Мне нужна помощь для отображения формы в средней / правой части страницы с помощью CSS. С текущим CSS, который у меня есть для формы, она отображается внизу страницы, что неправильно, я хочу, чтобы она была посередине / справа. Форма представляет собой поле поиска, где пользователи могут искать участников на веб-сайте.
У меня плохо с CSS, может быть, кто-то может также предложить классный стиль для формы? : D
Класс div с именем searchList — это то место, где форма, которую я хочу выровнять по середине / справа
Мой код:
<?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;
}
Решение
Используйте CSS свойство position или float.
Для отображения формы в правой части страницы используйте float : right;
form {
float : right;
}
Другие решения
Перемещение вправо, где 4-е значение — это левый отступ.
отступы: 0px 0px 0px 30px;
.. альтернативно вы можете использовать.
отступ слева: 30 пикселей;
Если вы хотите лучше контролировать структуру макета, я предлагаю вам использовать «сетку», встроенную в CSS. Поиск «CSS сетки».
detector