如何在html和CSS中的同一行中對齊兩個元素？
[英]How to align two elements in the same line in html and css?
問題描述
我有一個網頁，其中的頂部有兩個元素，一個是首頁徽標，另一個是上傳按鈕。 此時的上傳按鈕（頂部的上傳按鈕應該稍微多一點）與首頁徽標未成一直線。
這是小提琴 。
主頁徽標和按鈕的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中，我無法將它們對齊。
4 個解決方案
解決方案1
3 已采納 2017-07-18 03:59:26
對於頂部：
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>
解決方案2
1 2017-07-18 04:13:02
解決方案3
1 2017-07-18 04:22:28
請更換
ul#horizontal-list li {
display: inline;
}
跟隨
ul#horizontal-list li {
display: inline-block;
vertical-align: middle;
}
解決方案4
0 2017-07-18 04:08:12
我將“上傳”和徽標放在左側居中，並將徽標和上傳水平居中。
* { 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>
HTML CSS將兩個元素對齊在同一行
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.