html - 如何在同一行对齐文本和按钮？

Question

当屏幕宽度小于479px时，我希望文字在 slider 下方。现在，当我将浏览器的大小调整为 < 479px 时，其中一个文本 div 位于 slider 的顶部，另一个位于 slider 的底部。

这是测试链接:http://chemistry2014.tw/

我希望它看起来像:

Answer 1

这是由于您设置 html 的方式所致。如果您可以选择更改 html 标记，最好的解决方案是重新定位 div 并将其放在 slider 表单之后。另一种方法是 absolute 以正确的屏幕尺寸将元素定位在上边距。

示例 CSS:

@media only screen and (max-width: 479px)
   .D-answer {
      margin-top: 40px;
      position: absolute;
      // rest of CSS code

已编辑

@media only screen and (max-width: 767px) {
    .container{ width: 300px; }  <----------------- add this
    h4 {text-align:center; margin-left:0px;}
    .D-answer {margin-left:0px;}
    .A-answer {margin-right:0px;}
}