0
我正在測試網頁頂部的導航欄，並在右側放置了一個Dropbox菜單。從菜單到欄的背景以及將圖標與文本對齊時，我遇到了很多空間問題。對齊元素的導航菜單欄問題
我的代碼是這樣的：
function dropdownClick() {
document.getElementById("myDropdown").classList.toggle("show");
}
// Close the dropdown menu if the user clicks outside of it
window.onclick = function(event) {
if (!event.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
@charset "UTF-8";
/* CSS Document */
html
{
position: relative;
min-height: 100%;
\t font-family: Gotham-Light;
\t
\t -webkit-text-size-adjust: 100%;
\t -ms-text-size-adjust: 100%;
}
body {
margin: 0;
}
/* Def. Navigation Bar */
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #dedee1;
}
li {
float: left;
}
li a, .dropbtn {
display: inline-block;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover, .dropdown:hover .dropbtn {
background-color: red;
}
li.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.show {display:block;}<!doctype html>
<html>
<head>
\t <meta charset="UTF-8">
\t <link href="assets/css-styles/styles.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
\t <title>navigation</title>
</head>
<body>
\t \t <!-- NAVIGATION -->
\t <nav>
<ul>
<li><a href="#page1">Page1</a></li>
<li><a href="#page2">Page2</a></li>
<li style="float:right" class="dropdown">
<a class="dropbtn" onclick="dropdownClick()"><i class="material-icons">face</i>Username</a>
<div class="dropdown-content" id="myDropdown">
<a href="#settings"><i class="material-icons">settings</i> preferències</a>
<a href="#preferences"><i class="material-icons">lock</i> canviar password</a>
<a href="#logout"><i class="material-icons">power_settings_new</i> log out</a> \t
</div>
</li>
</ul>
\t </nav>
</body>
</html>活動鏈接的箱子不對齊到導航欄的頂部和圖標與文字「用戶名」 aresn」彼此對齊。
對不起，但我是初學者的CSS風格。
在此先感謝。
嗯一切正常。看到這裏> https://jsfiddle.net/Mihai_T/ftLh4m8b/ –
你能給出任何期望的輸出圖像？ – Gowtham
對不起，但我看不到...如何插入一個圖像的問題？ – ruzD