Question

我在做一些基本的事情时遇到一些问题（我认为）。我想将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来完成。有人有建议吗？

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

别忘了清除浮动。清楚的

水平放置HTML输入和按钮

1 个答案: