Отказ от ответственности: я неплохо знаком с HTML. Я знаю, что это (скорее всего) будет помечено как повторение, однако я не могу произнести это и искать, поэтому я Я не смог найти нужную мне информацию, поэтому я пришел задать этот очень простой вопрос о переполнении стека. У меня есть быстрая HTML форма входа в систему с div:
На изображении, приведенном выше, моя форма входа выровнена по правому краю, а черный цвет 2px границу, окружающую ее, возможно ли сделать так, чтобы граница заключала только форму входа в систему, а не лишние пробелы слева.
Требуемый результат:
Спасибо ! Код:
<!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>