Question

我无法在输入评论部分旁边放置按钮（输入）。我尝试了很多选项，例如align = right，并在填充上进行操作，但没有成功。当我取出启动包装纸时，它可以工作，但是当包装纸插入时，它就不能工作。任何帮助将不胜感激！预先谢谢

这是我的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;

找到最适合自己的人。

Answer 2

因此，为了使按钮和输入彼此之间具有相对位置，它们需要共享一个共同的父亲（最好是一个单独的父母），因此只需在它们周围放置一个包装div：

<div id="comment_container">
    <input type="text" class="comment_input comment_element" placeholder="Write a comment" />
    <Button class="comment_submit comment_element">Enter</Button>
</div>

现在，您的元素共享一个共同的父亲-包装器，您可以从向父元素添加宽度值开始。将ID保留为像素值，但您可以将其转换为％或vw或其他任何值。然后，您将需要为按钮和输入添加少量空白（为它们留出一定的呼吸空间），并最终指定其宽度。您可以使用这些值或复制我的值。最后调整两个元素的高度，享受优质的html和css的魔力。

.comment_element{
    display: inline-block;
    padding: 10px 5px;
    border: none;
}
#comment_container {
    width: 400px;
    height: auto;
    background: #4278DD;
    padding: 10px 5px;
}
.comment_input {
    width: 300px;
}
.comment_submit {
    width: 80px;
    cursor: pointer;
}

我添加了一些CSS技巧来使事情变得有趣

Answer 3

根据图像，您必须减少按钮的with 没有报价。

.CommentSection { 宽度：100％; }
如上所述，您的样式需要更改按钮的填充顶部（大约）

.ButtonEnter { padding-top：20px; 宽度：60px; 红色; }
或者尝试引导。

如何在输入旁边放置按钮？

3 个答案: