Как сделать так, чтобы кнопки разной формы были рядом друг с другом? - PullRequest
0 голосов
/ 31 октября 2019

Во-первых, я использую материализацию для этого. Я делаю две кнопки, одну для входа и одну для регистрации, обе находятся в разных формах, я сделал это таким образом, чтобы кнопка регистрации была направлена ​​в регистр. проблема заключается в том, что обе кнопки имеют разную форму, так как они не будут рядом друг с другом, и я не знаю, почему это так, мне нужно, чтобы обе были рядом друг с другом (знаккнопка «вверх» находится рядом с кнопкой входа в систему)

<!DOCTYPE html>
<html>
<head>
    <title>Sanrio Merch</title>
    <link rel="stylesheet" type="text/css" href="css/materialize.min.css">
    <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <meta  name="viewport" content="width=device-width,initial-scale=1.0"/>
    <style type="text/css">
        body{
            background-image: url("assets/bg.gif");
            background-size: 100% 120vh;
            background-repeat: no-repeat;
            }
        .card{
            background: rgba(0,0,0,.4);
            width: 40%;
            height: 75vh;
            margin: 9% auto;
            }
        label,input{
            color: white;
            font-size: 1em;
        }
        input{
            border-bottom: 1px solid white !important;
        }
        input:focus{
            box-shadow: 0 1px 0 0 white !important;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="card">
            <form action="login.php" method="post">
            <div class="card-action white-text brown">
            <h3>SIGN IN</h3>
            </div>
            <div class="card-content">
              <div class="form-field">
              <label for="username">Username</label>
              <input type="text" id="username" name="username" placeholder="username" required="">
              <br><br>
              <label for="password">Password</label>
              <input type="password" id="password" name="pass" placeholder="password" required="">
              </div><br>
              </div><br><br>
              <div class="form-field center-align">
              <button class="btn-large brown" name ='sigin'style="margin-right: 2%;" type="submit" name="submit">Sign In</button>
              </div>
            </form>
            <form action="login.php" method="post">
            <button class="btn-large brown" name="register">Sign Up</button>
            </form>
        </div>
        </div>
    </div>
</body>
</html>

Я ожидаю, что кнопка регистрации находится рядом с кнопкой входа в систему, но она не отображается таким образом enter image description here

1 Ответ

1 голос
/ 31 октября 2019

Вы можете создать 2 кнопки без type = "submit" и добавить несколько jQuery, например, так:

$( "#button_sign_up" ).click(function() {
  $( "#form_sign_up" ).submit();
});

$( "#button_sign_in" ).click(function() {
  $( "#form_sign_in" ).submit();
});

Таким образом, вы отмечаете свою кнопку, чтобы выполнить отправку на основе идентификатора формы. Теперь ваши кнопки могут быть где угодно на странице. Убедитесь, что у вас есть форма и идентификатор кнопки, присвоенные

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...