Question

我正在测试网页顶部的导航栏，右侧有一个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%;
    	font-family: Gotham-Light;
    	
    	-webkit-text-size-adjust: 100%;
        	-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>
    	<meta charset="UTF-8">
    	<link href="assets/css-styles/styles.css" rel="stylesheet">
        
        <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    
    	<title>navigation</title>
    </head>
    
    <body>
    
    		<!-- NAVIGATION -->
           	<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>	
                        </div>
                      </li>
                    </ul>
    
        	</nav>       
    
    
    </body>
    </html>

活动链接的框未与导航栏的顶部对齐。带有“用户名”文本的图标彼此不对齐。

很抱歉，我是css样式的初学者。

提前致谢。

Answer 1

将li a, .dropbtn显示更改为block而不是inline-block（这会导致不必要的保证金）。

另一个原因是i，给它float: left;

最后一个问题是子菜单出现在屏幕外，向其添加right: 0。

＆＃13;

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');
      }
    }
  }
}

＆＃13;

@charset "UTF-8";
    /* CSS Document */
    
    html
    {
        position: relative; 
        min-height: 100%;
    	font-family: Gotham-Light;
    	
    	-webkit-text-size-adjust: 100%;
        	-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: 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;
      right: 0;
        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;}

.dropbtn i { float: left;  }

＆＃13;

<!doctype html>
    <html>
    <head>
    	<meta charset="UTF-8">
    	<link href="assets/css-styles/styles.css" rel="stylesheet">
        
        <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    
    	<title>navigation</title>
    </head>
    
    <body>
    
    		<!-- NAVIGATION -->
           	<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>	
                        </div>
                      </li>
                    </ul>
    
        	</nav>       
    
    
    </body>
    </html>

＆＃13;

导航菜单栏对齐元素的问题

1 个答案: