Блог

Главная - Вопросы по программированию - Поля, вызывающие смещение при изменении размера окна браузера

Поля, вызывающие смещение при изменении размера окна браузера

#html #css

#HTML #css

Вопрос:

Итак, на моей странице у меня есть следующее:

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

В некотором смысле, я попытался создать поле идентификатора таким образом, чтобы текстовое поле было выровнено с текстовым полем адреса с помощью поля.

Однако меня беспокоит то, что всякий раз, когда я пытаюсь изменить размер окна браузера, поле заставляет его перемещаться, следовательно, больше не соответствует тому, что я хотел:

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

Почему это происходит? Как мне сохранить его таким образом, чтобы это не приводило к изменениям выровненной позиции при изменении размера?

 * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html,body {
    height: 100%;
    font-size: 1rem;
}

#container {
    display: flex;
    width: 100%;
}

#first {
    border: 1px solid black;
    border-radius: 5px;
    width: 35%;
    height: 90vh;
    margin-left: 10px;
}

#name_in, #id_in {
    width: 35%;
}
#addr_in {
    width: 75%;
}

.inputfield {
    margin-top: 10px;
}

#id_lab {
    margin-left: 3%;
}

#second {
    border: 1px solid black;
    border-radius: 5px;
    height: 90vh;
    width: 50%;
    margin-left: 10px;
}

#third {
    border: 1px solid black;
    border-radius: 5px;
    height: 90vh;
    /*width: 30%;*/
    width: 30%;
    margin-left: 10px;
    margin-right: 10px;
}

@media screen and (max-width: 1100px) {
    #container {
      flex-direction: column;
    }

    #first, #second, #third {
        width: 100%;
        margin-left: 0px;
    }
  } 
 <!DOCTYPE html>
<html lang="en">  
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href = "style.css">
  <title>Document</title>
</head>
<body>
  <div id = "container">
    <div id = "first">
      <div class="inputfield">
        <label id = "name_lab">Name</label>
        <input id = "name_in" type = "text">
        <label id ="id_lab">ID</label>
        <input id = "id_in" type = "text">
      </div>
      <div class="inputfield">
        <label>Address</label>
        <input id = "addr_in" type="text">
      </div>
    </div>
      
    <div id = "second">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam hendrerit quam et tellus tincidunt posuere.</p>
    </div>
    <div id = "third">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam hendrerit quam et tellus tincidunt posuere. </p>
    </div>
  </div>
</body>
</html>

Ответ №1:

Вы используете процент для ширины, и это будет работать только для определенной ширины браузера. Вместо этого используйте flex-grow.

  • сделайте .inputfield как flex и добавьте flex-grow ко всем входным данным.
  • Плюс сделать переполнение: скрыто, чтобы содержимое не перетекало.

в вашем css сделайте это:

  /* remove this 
 #name_in, #id_in {
     width: 35%;
 }
 #addr_in {
     width: 75%;
 }


 .inputfield {
     margin-top: 10px;
 }*/


 /* add this  */
 input{
   flex-grow: 100;
   overflow:hidden;
 }

 .inputfield {
     margin-top: 10px;
     display: flex;
 }


 .inputfield > *{
   margin: auto 10px;  /* change this value as per your preference */
 }
Метки: ,