水平放置 HTML 输入和按钮答案

【问题标题】：Placing HTML input and button horizontally水平放置 HTML 输入和按钮
【发布时间】：2018-07-05 20:55:08
【问题描述】：

我在做一些相当基本的事情时遇到了一些问题（我认为）。我想将 Save 和 Copy 按钮放在同一行，并在以下 CodePen 中水平居中：

https://codepen.io/anon/pen/XYLmwb?editors=1100

HTML：

<div class="wrapper">
 <form>
  <textarea id="notes"></textarea>
  <input id="save" type="submit" value="Save" />
 </form>
 <button id="copy-btn">Copy</button>
</div>

CSS：

#notes {

}

#save {

}

#copy-btn {

}

.wrapper {
 text-align: center;
}

保持 HTML 结构不变并且使用 CSS 完成这一点很重要。有人有建议吗？

【问题讨论】：

请在问题本身中包含代码，以便当您的外部链接失效时，您的代码仍然存在并且对未来的读者有用。

标签： html css button input

【解决方案1】：

#notes {
    float: left;
}

#save {
    float: left;
    margin: 7px 0px 0px 5px;
}

#copy-btn {
    position: absolute;
    margin: 7px 0px 0px 5px;
}

.wrapper {
  text-align: center;
}
.wrapper form{
    display: inline-block;
}
.wrapper button{
    display: inline-block;
}

只是不要忘记清除浮动。明确：两者；

【讨论】：