Метка отображается под флажком, и оба должны быть выровнены по центру - PullRequest
0 голосов
/ 28 октября 2019

Я в замешательстве. Я получил эту форму, jsfiddle:

https://jsfiddle.net/rx90f38u/1/

Там есть стиль, и я не могу понять, почему "помните" меня показывает под флажком.

Флажок и метка должны быть в одной строке и по центру.

CSS:

.bbp-login-form input[type=text], .bbp-login-form input[type=password], .bbp-login-form select {
  width: 100% !important;
  display: inline-block !important;
  border: 1px solid #ccc;
  border-radius: 4px;
    -moz-border-radius:4px;
  -webkit-border-radius:4px;
  box-sizing: border-box;
    color: #000;
    background-color: #c1c1c1;
}

.bbp-login-form label {
    text-align:left;
  width: 100% !important;
  margin: 10px 0;
  display: inline-block !important;
}

HTML:

<!DOCTYPE html>
<html>

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>Untitled 1</title>
</head>

<body>

<h2 class="widgettitle">Support Forums</h2>
<form action="https://www.publictalksoftware.co.uk/wp-login.php" class="bbp-login-form" method="post">
    <fieldset>
    <div class="bbp-username">
        <label for="user_login">Username: </label>
        <input id="user_login" name="log" size="20" tabindex="103" type="text" value="">
    </div>
    <div class="bbp-password">
        <label for="user_pass">Password: </label>
        <input id="user_pass" name="pwd" size="20" tabindex="104" type="password" value="">
    </div>
    <div class="bbp-remember-me">
        <input id="rememberme" name="rememberme" tabindex="105" type="checkbox" value="forever">
        <label for="rememberme">Remember Me</label> </div>
    </fieldset></form>

</body>

Если я добавлю этот CSS, то получу Запомнить меня центр:

.bbp-login-form .bbp-remember-me label {
    text-align: center;
  width: 50%;
}

Но даже если я уменьшу ширину, все равно проблема.

Ответы [ 3 ]

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

Попробуйте это

.bbp-login-form .bbp-remember-me label {
        text-align: left;
        width: auto !important;
        vertical-align: initial;
    }
0 голосов
/ 28 октября 2019

Вы можете использовать Flexbox для выполнения работы.

.bbp-remember-me{
    display:flex;
    justify-content:center;
    align-items:center;
}

https://jsfiddle.net/xh831fnd/1/

0 голосов
/ 28 октября 2019

Попробуйте это css

.bbp-login-form label {
  margin: 10px 0;
  display: inline-block !important;
}

.bbp-remember-me{
   text-align: center;
}

https://jsfiddle.net/jdfkbvrt/

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