0

Как выровнять input и при этом чтобы еmail был text-align: right? и всё это по середине.

form {
  width: 600px;
  height: 500px;
  margin: auto;
  margin-top: 10%;
}

.formPadding {
  padding: 30px;
}

span {
  color: black;
  font-size: 36px;
}
p {
  font-size: 12px;
  font-family:"Helvetica" ;
}

input[type=email],[type=password] {
  margin-left: 5px;
  padding: 10px 10px 10px 5px;
}


input, label {
  margin-top: 10px;
}

label {
  font-size: 12px;
  font-family:"Helvetica";
}
<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title></title>
  <link rel="stylesheet" href="main.css">
</head>

<body>
  <div class="form">

    <form action="index.html" method="post">
      <div class="formPadding">
        <span><b>Login</b></span>
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>

        <label for="Email">Email:</label>
        <input type="email" name="email" value="Enter your email..." id="Email">

        <br>

        <label for="Pass">Password:</label>
        <input type="password" name="pass" id="Pass" value="12345678">

        <input type="checkbox" name="rememberMe" id="RememberMe" value="">
        <label for="RememberMe">Remember Me</label>
        <div class="forgotPassword">
          <a href="#">Forgot password?</a>
        </div>
        <div class="buttLog">
          <input type="submit" name="log" id="Log" value="LOGIN">
        </div>
      </div>
    </form>
  </div>
  <script src="main.js"></script>
</body>

</html>

3
  • как вариант: label сделать display:inline-block и задать ширину
    – Bald
    Commented 6 февр. 2019 в 11:43
  • это помогает выравнять input, но мне так же нужно выравнять Email: по правому краю
    – Bender
    Commented 6 февр. 2019 в 11:47
  • отбой. всё получилось. спасибо.
    – Bender
    Commented 6 февр. 2019 в 11:48

2 ответа 2

0
<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title></title>
  <link rel="stylesheet" href="main.css">
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <div class="form">

    <form action="index.html" method="post">
      <div class="formPadding">
        <span><b>Login</b></span>
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>

        <label class="mail" for="Email">Email:</label> //Присваиваем класс лейблу
        <input type="email" name="email" value="Enter your email..." id="Email">

        <br>

        <label for="Pass">Password:</label>
        <input type="password" name="pass" id="Pass" value="12345678">

        <input type="checkbox" name="rememberMe" id="RememberMe" value="">
        <label for="RememberMe">Remember Me</label>
        <div class="forgotPassword">
          <a href="#">Forgot password?</a>
        </div>
        <div class="buttLog">
          <input type="submit" name="log" id="Log" value="LOGIN">
        </div>
      </div>
    </form>
  </div>
  <script src="main.js"></script>
</body>

</html>

form {
width: 600px;
height: 500px;
margin: auto;
margin-top: 10%;
}
    
.formPadding {
padding: 30px;
}
    
span {
color: black;
font-size: 36px;
}
p {
font-size: 12px;
font-family:"Helvetica" ;
}
    
input[type=email],[type=password] {
margin-left: 5px;
padding: 10px 10px 10px 5px;
}
    
    
input, label {
margin-top: 10px;
}
    
label {
font-size: 12px;
font-family:"Helvetica";
}
label.mail {          //делаем отступ от левого края, чтобы выровнять
margin-left: 23px;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="main.css">
<link rel="stylesheet" href="style.css">
</head>

<body>
<div class="form">

	<form action="index.html" method="post">
<div class="formPadding">
	<span><b>Login</b></span>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>

<label class="mail" for="Email">Email:</label> //Присваиваем класс лейблу
<input type="email" name="email" value="Enter your email..." id="Email">

<br>

<label for="Pass">Password:</label>
<input type="password" name="pass" id="Pass" value="12345678">

<input type="checkbox" name="rememberMe" id="RememberMe" value="">
<label for="RememberMe">Remember Me</label>
<div class="forgotPassword">
	<a href="#">Forgot password?</a>
</div>
<div class="buttLog">
	<input type="submit" name="log" id="Log" value="LOGIN">
</div>
</div>
</form>
</div>
<script src="main.js"></script>
</body>

</html>

1
  • HTML и CSS можно и нужно писать в одном ответе! Более того, у Stack Overflow есть механизм, благодаря которому такой код можно сразу запускать и тестировать – посмотрите среди кнопок вверху окна создания/редактирования ответа.
    – AivanF.
    Commented 6 февр. 2019 в 12:36
-1
label {
  font-size: 12px; 
  font-family:"Helvetica"; 
  display: inline-block; 
  width: 100px; 
  text-align: right; 
 }
1
  • добро пожаловать на stack overflow на русском! пожалуйста, постарайтесь оставлять чуть более развёрнутые ответы. дополнить ответ можно, нажав править Commented 6 февр. 2019 в 12:10

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.