在可调整大小的输入右侧添加复选框

Question

我正在尝试了解DOM，并且很难在可调整大小的输入字段的右侧放置引导复选框。

首先，我将输入内容和复选框添加到div中，因为我希望复选框根据添加到可调整大小的文本字段中的文本量而移动。这就是我到目前为止所拥有的。

  .answer1Container{
    width: 100%;	
    }
    
    /*Here is the styling for the input field*/
    div.answerInput1 {
        border: 2px solid;
        padding: 20px; 
        margin-top: 4%;
        width: 50%;
        resize: both;
        overflow: auto;
    }
    
    /*Below is styling for the checkboxes of the edit question page*/
    
    .form-group input[type="checkbox"] {
        display: none;
    }
    
    .form-group input[type="checkbox"] + .btn-group > label span {
        width: 20px;
    }
    
    .form-group input[type="checkbox"] + .btn-group > label span:first-child {
        display: none;
    }
    .form-group input[type="checkbox"] + .btn-group > label span:last-child {
        display: inline-block;   
    }
    
    .form-group input[type="checkbox"]:checked + .btn-group > label span:first-child {
        display: inline-block;
    }
    .form-group input[type="checkbox"]:checked + .btn-group > label span:last-child {
        display: none;   
    }

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<div class="answer1Container"> 
  <div class = "answerInput1">"Here is some content"</div>
    <div class="[ form-group ]">
                <input type="checkbox" name="fancy-checkbox-primary" class="checkbox" id="fancy-checkbox-primary" autocomplete="off" />
                <div class="[ btn-group ]">
                    <label for="fancy-checkbox-primary" class="[ btn btn-primary ]">
                        <span class="[ glyphicon glyphicon-ok ]"></span>
                        <span> </span>
                    </label>
                    <label for="fancy-checkbox-primary" class="[ btn btn-default active ]">
                        This Answer is Correct
                    </label>
                </div>
            </div>
    </div>

但是，我没有任何运气可以移动该复选框。它一直牢牢地塞在输入字段的下面。我已经尝试过text-align:right;，但这并未移动该复选框。我还尝试添加padding等，但是没有运气（为了清楚起见，我从附加的CSS中删除了失败的尝试）。

万一我的解释不清楚，我正在寻求实现以下目标：

作为初学者，我将对如何实现此目标提供一些指导。我想保持设计如代码片段所示，我只需要了解如何根据需要移动它即可。谢谢。

Answer 1

下面是实现图片中内容的代码：

#container { font-family: Verdana; position: relative; }
#container > div { font-size: 1.2em; color: darkslategrey; display: flex; position: absolute; left: 0; top: 0; height: 50px; width: 50px; border: 1px solid silver; box-sizing: border-box; border-radius: 5px 0 0 5px; justify-content: center; align-items: center; background: lightgrey; }
#container > input[type="text"] { font-size: 1.3em; width: 300px; padding-left: 60px; height: 50px; box-sizing: border-box; border-radius: 5px; border: 1px solid silver; }

<div id="container">
  <div>@</div>
  <input type="text" placeholder="Username">
  <input type="checkbox">
  <span>Remember me</span>
</div>

Answer 2

我将float: right;添加到了div.form-group，并将float: left;添加到了div.answerInput1。基本上，这是您将某些内容移到右边的全部操作。 float: left是可选的，并且会影响复选框在文本框上方还是下方。参见https://www.w3schools.com/css/css_float.asp

您的代码有点混乱，肯定有一种更好的方法，但是我只是想演示如何在代码段的右边移动复选框。

.answer1Container{
    width: 100%;	
    }
    
    /*Here is the styling for the input field*/
    div.answerInput1 {
        border: 2px solid;
        padding: 20px; 
        margin-top: 4%;
        width: 50%;
        resize: both;
        overflow: auto;
        float: left;
      
    }
    
    /*Below is styling for the checkboxes of the edit question page*/
    div.form-group{
    float:right; 
    
    }
    .form-group input[type="checkbox"] {
        display: none;
    }
    
    .form-group input[type="checkbox"] + .btn-group > label span {
        width: 20px;
    }
    
    .form-group input[type="checkbox"] + .btn-group > label span:first-child {
        display: none;
    }
    .form-group input[type="checkbox"] + .btn-group > label span:last-child {
        display: inline-block;   
    }
    
    .form-group input[type="checkbox"]:checked + .btn-group > label span:first-child {
        display: inline-block;
    }
    .form-group input[type="checkbox"]:checked + .btn-group > label span:last-child {
        display: none;   
    }

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<div class="answer1Container"> 
  <div class = "answerInput1">"Here is some content"</div>
    <div class="[ form-group ]">
                <input type="checkbox" name="fancy-checkbox-primary" class="checkbox" id="fancy-checkbox-primary" autocomplete="off" />
                <div class="[ btn-group ]">
                    <label for="fancy-checkbox-primary" class="[ btn btn-primary ]">
                        <span class="[ glyphicon glyphicon-ok ]"></span>
                        <span> </span>
                    </label>
                    <label for="fancy-checkbox-primary" class="[ btn btn-default active ]">
                        This Answer is Correct
                    </label>
                </div>
            </div>
    </div>

Answer 3

尝试以下方法：

<div class="input-group mb-3">
  <div class="input-group-prepend">
    <span class="input-group-text" id="basic-addon1">@</span>
  </div>
  <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
</div>