网站页脚文本与页脚顶部不对齐答案

【问题标题】：Website Footer Text Not Aligning With The Top of The Footer网站页脚文本与页脚顶部不对齐
【发布时间】：2018-09-10 11:02:56
【问题描述】：

我正在制作一个网站，我想要一个包含我们组的一些基本信息（地址、联系信息等）的页脚。我用来制作页脚的实际方法可能有缺陷（如果有请纠正我是）但我的主要问题是文本。我想要标题为“问题、评论或意见？”的文本。拥抱页脚的顶部。我还希望添加到页脚的任何其他文本也能做到这一点。我不知道该怎么做。我的代码和我所描述的图片如下。 This is the picture of what the footer looks like so far.

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

【问题讨论】：

不是答案，但拼写为“关注”。

标签： html css text footer

【解决方案1】：

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

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

【讨论】：

我只编写了大约一周的 HTML/CSS 代码，所以我很菜鸟。尽管如此，感谢您的快速回复。

【解决方案2】：

你需要使用vertical-align: top; 垂直对齐你的ul 元素。所以解决方案是：

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

Codepen

【讨论】：