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

Question

当屏幕宽度小于479像素时，我希望文本位于滑块下。现在，当我将浏览器调整为＆lt; 479px，其中一个文本div位于滑块顶部，另一个位于底部。

以下是测试链接：http://chemistry2014.tw/

我希望它看起来像：

Answer 1

这是由于您设置html的方式。如果您可以选择更改html标记，最佳解决方案是重新定位div并将其放在滑块窗体之后。另一种方法是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;}
}