如何在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.