为什么我的段落总是在我的按钮后面？

Question

每次缩小窗口时，页脚中的文字都会显示在我的按钮上：

我该如何解决？

这是我的HTML：

<div data-role="footer" class="footer2">
    <a href="#seiteHome" class="ui-btn-left ui-btn-back ui-btn ui-btn-corner-all ui-shadow ui-btn-hover-a ui-btn ui-shadow ui-corner-all ui-btn-icon-left ui-icon-back">Home</a>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
</div>

我的CSS：

.footer2 {
    text-align: center;
    padding: 7px;
    border-radius: 10px;
    clear: both;
}

提前致谢。

Answer 1

CSS

.footer2 {
   text-align: center;
   padding: 7px;
   border-radius: 10px;
   clear: both;
   margin-top: 30px;
}

或

.footer2 {
  text-align: center;
  padding: 15px 7px 7px;
  border-radius: 10px;
  clear: both;
}

Answer 2

如果您希望文本显示在按钮右侧而不重叠，请在<p>元素的左侧添加一些填充：

.footer2 p {
    padding-left: 84px;
}

  

<强> DEMO