添加元素跨度而不更改现有居中元素的位置答案

【问题标题】：Add element span without changing the position of existing centered elements添加元素跨度而不更改现有居中元素的位置
【发布时间】：2021-03-04 00:26:17
【问题描述】：

这是我在这里的第一个主题，我已经为我的场景尝试了一些解决方案但没有成功，所以我想我可以使用一些帮助：

我在现有的 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>

在上面的代码中，元素居中显示。当我单击输入元素右侧的按钮时，我想添加一些文本，例如 span 标签的“myText”，但是当我尝试这样做时，输入元素会丢失其他输入的“对齐”（它向左走）。那么如何添加这个“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>

【问题讨论】：

标签： html css center

【解决方案1】：

所以你基本上想在输入值旁边添加 myText？

就像在您的示例中一样，它将变为“示例！！！”在输入框中。

在这种情况下，只需使用 javascript。获取当前输入值并将 myText 附加到它。

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

// 编辑（评论后我更清楚你想要什么）

你可以在你的css中使用position: relative和position: absolute。

  .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. 
}

通常应该可以解决问题。

【讨论】：

我想在输入元素的右侧添加另一个元素，可以忽略文本值“Example”。 add element 的功能正常工作，但是如果您注意到，当显示 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>

【讨论】：