网站页脚文字与页脚顶部不符

Question

我正在建立一个网站，我想要一个有一些有关我们组的基本信息(地址，联系信息等(的页脚有缺陷(如果是这样，请纠正我(，但我的主要问题是文本。我想要标题为"问题，评论或坚持的文字？"拥抱页脚的顶部。我还希望我添加到页脚的任何其他文本都可以做同样的事情。我不知道该怎么做。我的代码和我正在描述的图片如下。这是到目前为止页脚外观的图片。

html：

        <footer id="footer">
            <ul class="footer-text">
                <li class="footer-title">Address</li>
                <li>place holder</li>
                <li>place holder</li>
                <li>place holder</li>
                <li>place holder</li>
            </ul>
            <ul class="footer-text">
                <li class="footer-title">Questions, Comments, or Conserns?</li>
                <li>place holder</li>
            </ul>
        </footer>

CSS：

#footer {
    background:#F6F7F9;
    bottom:0;
    height:17%;
    position:absolute;
    width:100%;
}
.footer-text {
    display:inline-block;
    font-size: 12px;
    list-style-type: none;
}
.footer-title {
    font-size:14px;
    text-decoration: underline;
}

Answer 1

将显示属性设置为inline-grid，这将解决您的问题，但是在您的HTML中需要进行更多改进，您必须使用DIV元素来设计HTML页面

.footer-text {
    display:inline-grid;
    font-size: 12px;
    list-style-type: none;
}

Answer 2

您需要使用垂直对齐垂直对齐UL元素：top;因此解决方案是：

.footer-text {
    display:inline-block;
    vertical-align: top;
    font-size: 12px;
    list-style-type: none;
}

codepen