Для выравнивания двух кнопок ниже

ProgramBox

Для выравнивания двух кнопок ниже

Post author:admin
Запись опубликована:4 мая, 2023
Post category:Вопросы по программированию

#php #html #css

#php #HTML #css

Вопрос:

Я использую div, и я настроил своего рода запуск системы входа в систему, но по какой-то причине я не могу заставить кнопки перейти ниже. На скриншоте показана проблема:

Я использовал эту штуку в CSS в самом низу. Я не знаю, поможет ли какой-либо другой CSS.

Также, поскольку скоро это будет система входа в систему с базой данных, мне интересно, есть ли веб-сайт, который кому-нибудь пригодился при создании своего.

 <!DOCTYPE html>
<html>
<head>
    <title>Login</title>
    <link rel="stylesheet" type="text/css" href="../css/header.css">
    <link rel="stylesheet" type="text/css" href="../css/site.css">
</head>
<body>



<?php include '../header.html'; ?>
    <div class="body-container">
        <div class="menu">
            <div class="login-container" style="">
                <h1 style="padding-bottom: 10px;">Username</h1>
                <input type="username" style="color: black; height: 50px; font-size:14pt;" name="user">
                <h1>Password</h1>
                <input type="Password" style="color: black; height: 50px; font-size:14pt; margin-top: 5%; " name="user">
                <button>test</button>
            </div>

        </div>
    </div>



</body>


</html>

 * {
     margin: 0;
     font-family: Arial;
     color: white;
}
 body {
     background-image: url(../img/Background-Blurred.jpg);
     background-repeat: no-repeat;
     background-attachment: fixed;
     background-size: cover;
     background-position: center;
     overflow-: hidden;
     overflow: hidden;
}
 .navbar {
     list-style-type: none;
     margin: 0;
     padding: 0;
     width: 100%;
     overflow: hidden;
     background-color: darkgrey;
     height: 46px;
     border-bottom: 0.05px solid black;
}
 li {
     float: left;
}
 li a {
     display: block;
     color: white;
     text-align: center;
     padding: 14px 16px;
     text-decoration: none;
}
 a:hover:not(.active) {
     background-color: #a0a0a0;
     border-bottom: 0.05px solid black;
     border: 0.05px solid black;
     box-shadow: 0 12px 10px 0 rgba(0,0,0,0.24), 0 17px 10px 0 rgba(0,0,0,0.19);
}
/*The body in the center of website */
 .body-container {
     height: 100%;
     width: 50%;
     margin-left: auto;
     margin-right: auto;
     position: relative;
}
 .menu {
     padding: 20px;
     margin-left: auto;
     margin-right: auto;
     width: auto;
     height: 100rem;
     background-color: darkgrey;
     text-decoration-color: black;
}
 .body-container .menu .title {
     margin-left: auto;
     margin-right: auto;
     text-align: center;
}
 .body-container .body-text {
     margin-left: auto;
     margin-right: auto;
     text-align: center;
     padding-top: 2.5%;
     text-align: left;
}
 .body-text {
     font-size: 25px;
}
 .announcement {
     height: 100px;
     padding: 5px;
     width: auto;
     background-color: midnightblue;
     text-align: center;
     margin-top: 20px;
     vertical-align: middle;
     border-radius: 25px;
}
 .announcement-text {
     padding-top: 10px;
}

.body-container .menu .login-container {
    position: absolute;
    top: 20%;
    left: 40%;
    size: 50px;

}

1. укажите положение кнопки: абсолютное;

2. В поле ввода пароля. Установить отображение: блокировать;

3. @godfather ты знаешь, как я могу это исправить. i.imgur.com/xuU8XOr.png в принципе, это нормально, когда используется обычное разрешение, но когда я перехожу на мобильный, это заставляет поле перемещаться вправо, а не по центру. .body-container .menu .login-container button { position:absolute; color: black; margin-top: 20%; margin-left: 75%; width: 50px; height: 50px; } также, как я могу сделать так, чтобы все поля были в центре. i

4. да, обычно мы начинаем по-разному с отображения и позиционирования

5. вы говорите о том, что весь контент должен быть центрирован или кнопки

Ответ №1:

Прежде чем беспорядочно выбрасывать исправления и взломы, чтобы «исправить» вашу форму, мы должны создать резервную копию и начать с действительной, синтаксически правильной формы. Я взял вашу разметку формы и устранил ошибки, а также внес некоторые усовершенствования и улучшения доступности.

Окружите form элементы в <form></form>
Нет type="Username" (изменено на type="text" )
type="Password" должно быть type="password"
Используйте label s вместо h1 s и свяжите их с входными данными вашей формы, используя for атрибут. Значение for атрибута — это id значение, которое добавляется к input ярлыку, на который указывает. Вы будете знать, что это работает правильно, когда щелчок label сфокусирует ваш курсор в input
Отделите CSS от HTML для наглядности / удобочитаемости и для возможности повторного использования стилей
Используйте flexbox для разметки (я использую столбчатое направление для этой формы для размещения дочерних элементов)

Результат

ДЕМОНСТРАЦИЯ

 .login-container {
  display: flex;
  flex-direction: column;
  max-width: 450px;
  margin: 0 auto;
}

.login-container input {
  font-size: 14pt;
  padding: .25em .5em;
  color: black;
  margin-bottom: .5em;
}

.login-container .actions {
  display: flex;
  justify-content: center;
}

.login-container [type="submit"] {
  margin-left: 1em;
}

 <form action="/login" method="post" class="login-container">
  <label for="username">Username</label>
  <input id="username" type="text">
  <label for="password">Password</label>
  <input id="password" type="password">
  <div class="actions">
    <a href="#">Forgot password?</a>
    <button type="submit">Login</button>
  </div>
</form>

jsFiddle

Ответ №2:

Реальная проблема в том, что у вас нет элементов уровня блока, инкапсулирующих ваши «строки». Единственная причина, по которой другие входные данные находятся в отдельной строке, заключается в том, что теги заголовка заставляют их там находиться.

Итак, лучшее, что можно сделать, это это (IMO)

 <div class="login-container" style="">
        <div class="row" >
            <h1 style="padding-bottom: 10px;">Username</h1>
            <input type="username" style="color: black; height: 50px; font-size:14pt;" name="user">
        </div>
        <div class="row" >
            <h1>Password</h1>
            <input type="Password" style="color: black; height: 50px; font-size:14pt; margin-top: 5%; " name="user">
        </div>
        <div class="row" >
            <button>test</button>
        </div>
   </div>

Тогда это просто сделать text-align:center в последней «строке».

Лично я бы использовал поле метки вместо заголовка, таким образом, вы можете использовать for="{inputId} , чтобы сделать метки интерактивными, как они и должны быть. Думаю, я просто «старой школы», когда дело доходит до форм.

Ответ №3:

Если я вас правильно понимаю, вы хотите, чтобы кнопка отображалась под полем пароля, верно?

Обычно я разделяю свои формы на строки, используя divs, поскольку по умолчанию они имеют вид display: block и full width. Что-то вроде этого:

 <div>
  <input type="Password" style="color: black; height: 50px; font-size:14pt; margin-top: 5%; " name="user">
<div>
<div class="login-btn-group">
   <button>test</button>
<div>

Затем вы можете настроить таргетинг на этот div и выровнять кнопки так, как вы хотите

 .login-btn-group {
    text-align: right;
}

Вы также могли бы использовать flex box или floats, но это просто. Кроме того, после добавления меток (что вам и следует) вы можете включить их в divs, чтобы сохранить их вместе, как отдельные компоненты

Ответ №4:

Хорошо, насколько я вижу, самый простой способ — это использовать css:

 button{
  position: relative;
  top: 6rem; // this will make your button get to any position you want following the (top, left, right, bottom) change the number to whatever suits you.
}

другое дело, если вы хотите, чтобы ваша кнопка меняла места, используя значения с плавающей запятой, ваш div должен иметь значение, при котором, когда нет пробела, кнопка опускается, сделайте ваш ввод равным 100% размеру div и установите div в значение, которое вам нравится, с помощью .

 *.login-container{
  width:300px;
  height:350px;
}

button{
  position: relative;
  float: left;
  margin-top:1rem;
}

другое дело, я бы порекомендовал вам изучить grid-layout и flex-box.

Ответ №5:

Используйте fieldset и label при работе с формами, которые затем позволяют вам стилизовать их по мере необходимости с помощью CSS.

 <form method="post" enctype="multipart/form-data" action="">
<fieldset>
<label for="username">User Name</label>
<input type="text" name="username" value="" maxlength="255" required="required" />
</fieldset>
<fieldset>
<label for="password">Password</label>
<input type="password" name="password" value="" maxlength="255" required="required" /></fieldset>
<fieldset>
<button style="width: 150px;" type="submit" name="doSomething">Log In</button>
<br />
<button style="width: 150px;" type="submit" name="resetPassword">Reset Password</button>
</fieldset>
</form>

Ответ №6:

Добро пожаловать в мир веб-разработки. Ниже приведены минимальные изменения, которые я внес в ваш код, чтобы получить желаемый результат.

 <div class="login-container" style="">
    <h1 style="padding-bottom: 10px;">Username</h1>
    <input type="text" name="username" style="color: black; height: 50px; font-size:14pt;">
    <h1>Password</h1>
    <input type="password" name="password" style="color: black; height: 50px; font-size:14pt; margin-top: 5%;">
    <div class="login-actions">
        <center>
            <a>forgot password?</a> amp;nbsp;amp;nbsp; <button type="submit">Login</button>
        </center>
    </div>
</div>

Я рекомендую вам ознакомиться с современными css-фреймворками, которые облегчат вашу жизнь.

Ответ №7:

создайте новый файл и протестируйте его, я сделал его адаптивным, теперь вам просто нужно настроить target .login-container на положение сверху или снизу и размер шрифта, если вы хотите изменить, вы также можете использовать vw для адаптивного шрифта

 * {
    margin: 0;
    font-family: Arial;
    color: white;
}
body {
    background-image: url("https://cdn.pixabay.com/photo/2018/09/23/18/30/drop-3698073_960_720.jpg");
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    background-position: center;
    overflow: hidden;
}
.navbar {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 100%;
    overflow: hidden;
    background-color: darkgrey;
    height: 46px;
    border-bottom: 0.05px solid black;
}
li {
    float: left;
}
li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}
a:hover:not(.active) {
    background-color: #a0a0a0;
    border-bottom: 0.05px solid black;
    border: 0.05px solid black;
    box-shadow: 0 12px 10px 0 rgba(0,0,0,0.24), 0 17px 10px 0 rgba(0,0,0,0.19);
}
/*The body in the center of website */
.body-container {
    text-align: center;
    height: 100%;
    width: 50%;
    margin: 0 auto;
  
}
.menu {
    
    width: auto;
    height: 100rem;
    background-color: darkgrey;
    text-decoration-color: black;
}
.body-container .body-text {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    padding-top: 2.5%;
    text-align: left;
}
.body-text {
    font-size: 25px;
}

.announcement-text {
    padding-top: 10px;
}

.announcement {
    height: 100px;
    padding: 5px;
    width: auto;
    background-color: midnightblue;
    text-align: center;
    margin-top: 20px;
    vertical-align: middle;
    border-radius: 25px;
}

.login-container {
    top: 10%;
    position: relative;
}

 <body>


<?php include '../header.html'; ?>

    <div class="body-container">
        <div class="menu">
            <div class="login-container" style="">
                <h1 style="padding-bottom: 10px;">Username</h1>
                <input type="username" style="color: black; height: 50px; " name="user">
                <h1>Password</h1>
                <input type="Password" style="color: black; height: 50px; " name="user">
                <div class="button">
                <button>test</button>
            </div>
            </div>
           

        </div>
    </div>



</body>