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

Question

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

我在现有的 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”，当我点击输入元素右侧的按钮时，但是当我尝试这样做时，输入元素失去了其他输入的“对齐”（它左边）。那么如何添加这个“跨度文本”，同时保持输入元素对齐？

我需要避免更改其他元素 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>

Answer 1

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

就像你的例子一样，它会变成“Example !!!”在输入框中。

在那种情况下只需使用 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. 
}

通常这应该可以解决问题。

Answer 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>

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

Add element span without changing the position of existing centered elements

html

css

center