HTML заключить текст без лишних пробелов в теге div - PullRequest
0 голосов
/ 26 января 2020

Отказ от ответственности: я неплохо знаком с HTML. Я знаю, что это (скорее всего) будет помечено как повторение, однако я не могу произнести это и искать, поэтому я Я не смог найти нужную мне информацию, поэтому я пришел задать этот очень простой вопрос о переполнении стека. У меня есть быстрая HTML форма входа в систему с div: HTML Form with extra space.

На изображении, приведенном выше, моя форма входа выровнена по правому краю, а черный цвет 2px границу, окружающую ее, возможно ли сделать так, чтобы граница заключала только форму входа в систему, а не лишние пробелы слева.

Требуемый результат: HTML Div tag (drawn figure)

Спасибо ! Код:

<!DOCTYPE html>
<html>
<head>
    <style>
        html body {
            margin:20px;
        }
        #login-form{
            padding:30px;
            border:2px solid black;
        }
        #title-login{
            font-family:Arial,sans-serif,serif;
            margin-right:235px;
            
        }
        .inpt{
            border-radius:3px;
            width:235px;
            height:30px;
            font-size:20px;
            border: 1px solid black;
            margin:2px;
        }
        .userinpt{
            width:315px;
        }
        .passwdinpt{
            margin-right:83px;
        }
        
        .login-button{
            background-color: transparent;
            color: black;
            border: 1.5px solid #008CBA;
            padding: 13px 26px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 16px;
            margin: 4px 2px;
            transition-duration: 0.4s;
            cursor: pointer;
            border-radius:5px;
            margin-right:210px;
        }
        .login-button:hover {
            background-color: #008CBA;
            color: white;
        }
        #ask-reg{
            font-family:sans-serif;
            font-weight:lighter;
            margin-right:10px;
        }
        #link-reg{
            
        }
        .link {
            color: #0099ff;
            text-decoration: none;
        }

        .link:hover {
            color: #007acc;
            transition-duration: 100ms;
            transition-property: all;
            border-bottom: 1.3px solid black;
            padding: 0 0 0.8px;
            opacity:100%;
        }
        .link:active {
          color: #99d6ff;
        }
    </style>
</head>
<body>
    <div align="right" id="login-form">
    <h1 id="title-login" >Login</h1>
    <form action="subindex.php" method="post" >
      <input type="text" class="inpt userinpt"  name="usrname" placeholder="Username or E-mail"><br>
      <input type="password" class="inpt passwdinpt" name="passwd" placeholder="Password"><br><br>
      <button type="sumbit" class="login-button" name="logn">Confirm</button><br>
    </form>
    <br>
    <p id="ask-reg" >If you do not have an account, register <a id="link-reg" class="link" href="register.html">here</a>.</p>
    </div>


<script>

</script>

</body>
</html>

Ответы [ 2 ]

1 голос
/ 26 января 2020

border всегда будет окружать элемент width и height, включая padding. измените width формы и, если вы хотите, чтобы она соответствовала правильному использованию:

form {
    width: 30%;
    margin-left: auto;
}
0 голосов
/ 26 января 2020

Самый простой способ сделать это - установить свойства width и float:right в элементе # login-form. Вот пример для repl.it: https://repl.it/@TrishaAguinaldo / example-border

Кроме того, старайтесь не использовать <br> для разбиения html элементов. Для этого вы можете просто установить поле / отступ для элемента.

enter image description here

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