0

Как мне ограничить див что-бы форма заполнения встала на нужное место?

.h1
{
	color: #868686;
	margin-left: 50px;
}

.a 
{
	 max-width: 300px;
    width: 50%;
    color: green;
	margin-top: 50px;	
	margin-left: 50px;
	font: 10pt Tahoma;
} 
   
.underline
{
	   text-decoration: underline;
}

body 
{
  border-right: solid #b1cdff 28px;
  border-top: solid #b1cdff 28px;
}

.form
{
	margin-bottom: 200px;
	width: 250px; 
    padding: 10px; 
	 border: 2px solid red;
	margin-left: 581px;
	
}
<html>

	<head>
		<meta http-equiv="content-type" content="text/html; charset=utf-8">
		<link rel="stylesheet" type="text/css" href="style.css">
	</head>
	
	<body>
	<h1><span class="h1">Лабораторная работа №1</span></h1>
	
	<div class="a"
 <p>Главная :: <span class="underline">Задание на лабораторную работу</span></p> 
 </div>
 
<form>
	<div class="form">
	<label for="login">Логин:</label>
	 <input type='text' name='login'/> <br />
	 <label for="password">Пароль:</label>
	 <input type='password' name='password' /> <br />
	<input type='submit'value="Отослать данные"/>
	</div>
</form>
	
	</body>
	
</html>

введите сюда описание изображения введите сюда описание изображения

1
  • dispay: inline насколько я могу помнить
    – ArchDemon
    15 сен 2018 в 14:51

2 ответа 2

0

Пожалуй так будет немного лучше:

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

body  {
  padding: 0;
  margin: 0;
  
}

.underline {
  text-decoration: underline;
}

.wrap {
  border-right: solid #b1cdff 28px;
  border-top: solid #b1cdff 28px;
  padding-left: 50px;
}

.row:before,
.row:after {
  display: table;
  content: " ";
}

.row:after {
  clear: both;
}

.col-6 {
  width: 50%;
  float:left;
}

h1 {
  color: #868686;
  margin-left: 50px;
}

.a  {
  max-width: 300px;
  width: 100%;
  color: green;
  margin-top: 50px;	
  font: 10px Tahoma;
} 

.form {
	margin-bottom: 200px;
	max-width: 250px; 
    width: 100%;
    padding: 10px; 
    border: 2px solid red;
}

input {
  width: 100%;
}

.form-row {
  margin-bottom: 10px;
}
<div class="wrap">
  <h1>
    Лабораторная работа №1
  </h1>
  
  
  <div class="row">
    <div class="col-6">
      <div class="a">
       <p>
         Главная :: 
         <span class="underline">
           Задание на лабораторную работу
         </span>
        </p> 
      </div>
    </div>

    <div class="col-6">
      <form>
          <div class="form">
            <div class="form-row">
              <label for="login">Логин:</label>
              <input type="text" name="login" id="login"/>
            </div> 
            <div class="form-row">
              <label for="password">Пароль:</label>
              <input type="password" name="password" id="password"/>
            </div> 
            <input type="submit" value="Отправить данные"/>
          </div>
      </form>
    </div>
  </div>
</div>

0

Я бы использовал FLEX. Это проще и понятнее. Почитай тут.
https://wp-kama.ru/id_8045/flex-v-css.html

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

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