Блог

Главная - Вопросы по программированию - Добавить диапазон элементов без изменения положения существующих центрированных элементов

Добавить диапазон элементов без изменения положения существующих центрированных элементов

#html #css #center

#HTML #css #центр

Вопрос:

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

Я работаю на существующей HTML-странице, и я стажер, поэтому мне нужно что-то изменить, не изменяя ничего другого (или, по крайней мере, минимум).

Итак, вот моя проблема:

 <form action="">
<center>
<div class="example-class">
  <input type="text" id="example3" name="fname" value="John"><br>
  <input type="text" id="example2" name="lname" value="Doe"><br>
  <input type="text" id="example2" name="lname" value="Example"><span>myText</span><br>
  <input type="submit" value="Submit">
  </div>
</center>
</form>

В приведенном выше коде элементы отображаются по центру.
Я хочу добавить некоторый текст, например, «myText» тега span, когда я нажимаю кнопку в правой части элемента ввода, но когда я пытаюсь это сделать, элемент ввода теряет «выравнивание» других входных данных (он идет влево). Итак, как я могу добавить этот «span text», но сохранить выравнивание входных элементов?

  • Мне нужно избегать изменения других элементов css.

Я прилагаю пример кода.

 <!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script>
$(document).ready(function() {
    $("#button").click(function(){
        $("#myText").show();
        return false;
    })
});
</script> 
</head>
<body>
<style>
input{
width: 92%;
text-align: center;
align: left;
align-items: start;
}

.example-class{
        width: 400px;
        height:300px;
        padding:5%;
}

.myText{
display:none;
}

</style>

<h2>Example</h2>

<form action="">
<center>
<div class="example-class">
  <input type="text" id="example3" name="fname" value="John"><br>
  <input type="text" id="example2" name="lname" value="Doe"><br>
  <input type="text" id="example2" name="lname" value="Example"><span class="myText" id="myText">!!!</span><br>
  <button id="button">Show element</button>
  <input type="submit" value="Submit">
  </div>
</center>
</form> 

</body>
</html>

Ответ №1:

Итак, вы в основном хотите добавить myText рядом со значением ввода?

Как и в вашем примере, это станет «Example !!!» в поле ввода.

В этом случае просто используйте javascript. Получите текущее входное значение и добавьте к нему myText.

 $(document).ready(function() {
       $("#button").click(function(){
        let myText = '!!!'
        let currentValue = $("#example2").val();
        $("#example2").val(currentValue   ' '   myText)
        return false;
    })
   });

// РЕДАКТИРОВАТЬ (я более четко понимаю, что вы хотите после вашего комментария)

Вы можете поиграть с position: relative и position: absolute в вашем css.

   .example-class{
        position:relative;  // add this
         width: 400px;
        height:300px;
        padding:5%;
  }

.myText{
  display:none;
  position:absolute; // add this
  right: 80px; // play with this one. 
}

Обычно это должно сработать.

Комментарии:

1. Я хочу добавить еще один элемент в правую часть элемента ввода, вы можете игнорировать текстовое значение «Пример». Функция добавления элемента работает правильно, но если вы заметили, когда отображается элемент span, элемент ввода смещается влево и больше не выравнивается по отношению к другим входным данным. Я просто хочу добавить элемент и сохранить ту же позицию ввода.

Ответ №2:

Установите абсолютную позицию для вашего диапазона

 $(document).ready(function() {
  $("#button").click(function() {
    $("#myText").show();
    return false;
  })
}); 
 input {
  width: 92%;
  text-align: center;
  align: left;
  align-items: start;
}

.example-class {
  width: 400px;
  height: 300px;
  padding: 5%;
}

.myText {
  display: none;
  position: absolute; /*<-- the change */
} 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<h2>Example</h2>
<form action="">
  <center>
    <div class="example-class">
      <input type="text" id="example3" name="fname" value="John"><br>
      <input type="text" id="example2" name="lname" value="Doe"><br>
      <input type="text" id="example2" name="lname" value="Example"><span class="myText" id="myText">!!!</span><br>
      <button id="button">Show element</button>
      <input type="submit" value="Submit">
    </div>
  </center>
</form>
Метки: