html - 如何在html和css中将两个元素对齐在同一行？

Question

我有一个网页，顶部有两个元素，一个是主页 Logo ，另一个是上传按钮。此时的上传按钮(上传按钮应该在顶部多一点)与主页 Logo 不在一条直线上。

这是fiddle 。

主页 Logo 和按钮的 HTML 和 CSS 代码为:

HTML:

<div id="upload-button">
    <ul id="horizontal-list">
        <li class="homepage-logo">
            <a href="https://www.homesail.ca/prelaunch" target="_blank">
                <img src="assets/img/Uploads/logofinalhomesail.png">
            </a>
        </li>
        <li class="upload-button">Upload</li>
    </ul>
</div>

CSS:

/* homepage logo + Upload-button start */

#upload-button {
    display: table;
}

#horizontal-list {
    margin-top: 90px;
}

ul#horizontal-list li {
    display: inline;
}

ul#horizontal-list .homepage-logo {
    margin-left: 540px;
}


/* homepage logo + Upload-button finish */

我想知道如何将主页 Logo 和上传按钮正确对齐(上传按钮位于顶部)。我确实在 html 中为上传按钮创建了一个单独的类，但不幸的是仍在 CSS 中，我无法将它们对齐在一起。

Answer 1

顶部:

ul li:last-child {
  vertical-align: top;
}

#upload-button {
    display: table;
}

#horizontal-list {
    margin-top: 90px;
}

ul#horizontal-list li {
    display: inline;
}

ul#horizontal-list .homepage-logo {
    margin-left: 0px;
}

ul li:last-child {
  vertical-align: top;
}

img {
  width: 50px;
}

<div id="upload-button">
    <ul id="horizontal-list">
        <li class="homepage-logo">
            <a href="https://www.homesail.ca/prelaunch" target="_blank">
                <img src="http://justcuteanimals.com/wp-content/uploads/2016/10/baby-bear-pictures-cute-animal-pics.jpg">
            </a>
        </li>
        <li class="upload-button">Upload</li>
    </ul>
</div>

对于中间:

ul li a img{
  vertical-align: middle;
}

#upload-button {
    display: table;
}

#horizontal-list {
    margin-top: 90px;
}

ul#horizontal-list li {
    display: inline;
}

ul#horizontal-list .homepage-logo {
    margin-left: 0px;
}

ul li a img{
  vertical-align: middle;
  width:50px;

}

<div id="upload-button">
    <ul id="horizontal-list">
        <li class="homepage-logo">
            <a href="https://www.homesail.ca/prelaunch" target="_blank">
                <img src="http://justcuteanimals.com/wp-content/uploads/2016/10/baby-bear-pictures-cute-animal-pics.jpg">
            </a>
        </li>
        <li class="upload-button">Upload</li>
    </ul>
</div>