Question

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

这是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中，我无法将它们对齐在一起。

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>

Answer 2

使用 flex 容器现代方式

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

<强> DEMO

Answer 3

请更改

 ul#horizontal-list li {
    display: inline;

}

以下

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

Answer 4

我集中了＃34;上传＆＃34;左侧有徽标，徽标居中，水平上传。

＆＃13;

* {
    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 */

＆＃13;

<!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>

＆＃13;

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

4 个答案: