html - 如何将按钮放在输入旁边？

Question

我无法将按钮(输入)放在我的输入评论部分旁边。 我已经尝试了很多选项，比如 align=right 和 paddings，但没有成功。当我取出 starts 包装器时，它可以工作，但当它在其中时却不起作用。 任何帮助将不胜感激! 提前谢谢你

这是一个Screenshot of the page .

这是我的 HTML:

.BoxInfo {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 1000px;
}

.BoxDesign {
  width: 70%;
  height: 500px;
  padding: 15px;
  padding-left: 50px;
  padding-right: 50px;
  border-radius: 0.9rem;
  border: 1px solid gray;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  transition: 0.3s;
}

.ButtonEnter {
  padding-top: 200;
  width: 60px;
  color: red;
}

.CommentSection {
  width: '100%';
  margin-right: -4px;
  margin: 0;
  display: inline-block;
}

<div class="BoxInfo">
  <div class="BoxDesign">
    <h3 class="police_fonce">My box</h3>
    <hr/>
    <h3>1 Info</h3>
    <h3 class="police_fonce">2 Info</h3>
    <h3 class="police_peu_fonce">3 Info</h3>

    <div class="ec-stars-wrapper">
      <a href="#" title="s1">&#9733;</a>
      <a href="#" title="s2">&#9733;</a>
      <a href="#" title="s3">&#9733;</a>
      <a href="#" title="s4">&#9733;</a>
      <a href="#" title="s4">&#9733;</a>
      <a id="textCom" href="#" title="s5">&nbsp;  Reviews</a>
    </div>
    <input type="text" class="CommentSection" placeholder="Write a comment" />
    <Button class="ButtonEnter">Enter</Button>
  </div>
</div>

Answer 1

只需在您的 CSS 中使用 position: 和 left: 或 right:。这是 MDN和 w3schools供引用。

你可以这样做:

position: absolute;
left: 500px;

或者

position: relative;
left: 50px;

无论您发现哪个最适合您。