如何在html和css中对齐同一行中的两个元素？答案

【问题标题】：How to align two elements in the same line in html and css?如何在html和css中对齐同一行中的两个元素？
【发布时间】：2017-07-18 03:55:59
【问题描述】：

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

这里是fiddle。

主页标志和按钮的 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 */

我想知道，我怎样才能将主页徽标和上传按钮正确对齐（上传按钮在顶部）。我确实在 html 中为上传按钮创建了一个单独的类，但不幸的是仍在 CSS 中，我无法将它们对齐在一起。

【问题讨论】：

标签： html css

【解决方案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>

【讨论】：

我试过了，但它在顶部。我只想上传文字在徽标中间。
它确实有效。谢谢。另外，我想知道如何调整文本的移动？（我可以看到 margin-top 和 margin-bottom 不起作用，有什么办法可以让它们起作用吗？）
@flash，不客气！请给我更多的解释。
像margin-top和margin-bottom一样，我们可以调整文本的移动。为什么这里 margin-top 和 margin-bottom 不起作用？
margin-top（和margin-bottom）属性设置元素的上（下）边距，在这里不起作用，最好的方法是使用vertical-align。

【解决方案2】：

只需使用 flex 容器现代方式

#horizontal-list{
    display: inline-flex;
    align-items: center;
}

DEMO

【讨论】：

这里是update fiddle 我想知道我需要在当前的 CSS 代码中进行哪些更改才能正确对齐徽标和上传按钮。由于某些原因，我想使用当前的 HTML 和 CSS 代码来正确对齐徽标和上传按钮。

【解决方案3】：

请更改

 ul#horizontal-list li {
    display: inline;

}

关注

ul#horizontal-list li {
    display: inline-block;
    vertical-align: middle;
}

【讨论】：

【解决方案4】：

我将“上传”与左侧的徽标居中，并将徽标和上传水平居中。

* {
    box-sizing: border-box;
}

body {
    background-color: #4676f2;
}


/* homepage logo + Upload-button start */

#upload-button {
    display: table;
    margin: auto;
}

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

ul#horizontal-list li {
    display: table-cell;
    vertical-align: middle;
}

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


/* homepage logo + Upload-button finish */


/* search box start */

#myInput {
    background-image: url(../assets/img/Uploads/searchicon.png);
    background-position: 99% 50%;
    background-repeat: no-repeat;
    font-size: 16px;
    margin-top: 100px;
    width: 670px;
    margin-right: auto;
    display: block;
    margin-left: auto;
    padding: 12px 20px 12px 40px;
    border: 1px solid #ddd;
    margin-bottom: 12px;
}


/* search box finish */


/* search box dropdown start */

#myUL {
    list-style-type: none;
    padding: 0;
    width: 50%;
    margin-bottom: 200px;
    margin-left: auto;
    margin-right: auto;
}

#myUL li a {
    border: 1px solid #ddd;
    margin-top: -1px;
    /* Prevent double borders */
    background-color: #f6f6f6;
    padding: 12px;
    text-decoration: none;
    font-size: 18px;
    color: black;
    display: block
}

#myUL li a.header {
    background-color: #e2e2e2;
    cursor: default;
}

#myUL li a:hover:not(.header) {
    background-color: #eee;
}


/* search box dropdown finish */

<!DOCTYPE html>
<html>

<head>
    <title>Search Index</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="shortcut icon" href="assets/img/Uploads/favicon.png">

</head>

<body>


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






    <input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search.." title="Type in a name">

    <ul id="myUL">
        <li><a href="#" class="header">A</a></li>
        <li><a href="#">B</a></li>
        <li><a href="#">C</a></li>

        <li><a href="#" class="header">D</a></li>
        <li><a href="#">E</a></li>
        <li><a href="#">F</a></li>

        <li><a href="#" class="header">G</a></li>
        <li><a href="#">H</a></li>
        <li><a href="#">I</a></li>
        <li><a href="#">J</a></li>
    </ul>

    <script>
        function myFunction() {
            var input, filter, ul, li, a, i;
            input = document.getElementById("myInput");
            filter = input.value.toUpperCase();
            ul = document.getElementById("myUL");
            li = ul.getElementsByTagName("li");
            for (i = 0; i < li.length; i++) {
                a = li[i].getElementsByTagName("a")[0];
                if (a.innerHTML.toUpperCase().indexOf(filter) > -1) {
                    li[i].style.display = "";
                } else {
                    li[i].style.display = "none";

                }
            }
        }

    </script>

</body>

</html>

【讨论】：