html - 对齐元素的导航菜单栏问题-6ren

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

转载作者：行者123 更新时间：2023-11-28 05:07:22

25

4

我正在测试网页顶部的导航栏，下拉菜单在右侧对齐。我在从菜单到栏背景的空间以及对齐图标与文本方面有很多问题。

我的代码是这样的:

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 样式的初学者。

提前致谢。

最佳答案

将 li a, .dropbtn 显示更改为 block 而不是 inline-block(在这种情况下会导致不需要的边距)。

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

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

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: 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;  }

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

关于html - 对齐元素的导航菜单栏问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39772163/

25

4

0

文章推荐： javascript - 为每个级别的 JS 元素设置样式

文章推荐： javascript - 将 PHP 应用程序编译为具有变体的 HTML

文章推荐： javascript - 表格计算结果添加了太多零位

jquery - 桌面上的非 Canvas 菜单，手机上的 Accordion 菜单 [Foundation 6.3]
使用 Foundation 6.3.1，我希望在桌面上显示 Canvas 外菜单，在移动设备上显示 Accordion 菜单。例如 This is the desktop view with a co
Javascript 菜单
function HideandUNhideObj(ThisObj) { var nav = document.getElementById(ThisObj).style if (nav.displ
JavaScript 菜单
我正在处理一个页面，该页面有一个显示“更新”的链接。当用户单击此链接时，我希望表单使用幻灯片效果并显示在链接下方。提交表单后，它会更新数据库，并且菜单会显示。我知道这可以用 JavaScript 来
带图标的 Gtk 菜单
这是我的运行时创建菜单的关键部分: GtkWidget *menu, *menu_item; menu = gtk_menu_new(); menu_item = gtk_image_menu_ite
Css3 donut 菜单
您好，我想实现一个像这样的 donut 菜单 http://dribbble.com/shots/610433-Wheel-Nav我知道有一种在 css3 中制作 donut 的简单方法。 .doug
SwiftUI 菜单 - 菜单实际打开时的操作
我的应用程序中有一个菜单，当菜单打开时我会触发触觉反馈(来自 onTagGesture Action )。然而有时当我点击菜单打开触发器时，菜单实际上不会打开，但我仍然收到触觉反馈。我只在菜单实际
悬停时带有边框半径的 CSS 菜单
也许这是一个简单的解决方案，但我坚持了下来。这里有我的代码 http://jsbin.com/ejomuv纯CSS菜单我想要做的是在悬停时在下拉按钮底部设置 0px 边框半径，但仅在下拉菜单上设置
controls - 寻找替代品或改进网站上的下拉列表/菜单
下拉列表、菜单和组合框都是非常常见的用户界面元素。用户习惯于在 native 应用程序和 Web 应用程序中看到这些元素，但它们存在一些问题。您必须瞄准鼠标。当您将鼠标移开时，有些菜单会折叠，而有些
基于角色的 Laravel 菜单？
我有 codeigniter 背景。现在，我正在学习 Laravel。所以，我处于这种情况(示例)，我正在尝试创建一个具有多个用户的 web 应用程序。用户类型 A ，他们可以访问菜单 a、菜单 b
显示一个框的 JQuery 菜单
我正在学习 JQuery 的基础知识，我的老师显示的 menu() 看起来根本不像我的。这是我创建的菜单的 LAF: 代码: Hello Hi Welcome World
jquery如何隐藏

首页

博学

6Ren·AI

商城

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