menu 相关问题

我使用了在 w3schools.com 上找到的代码，并根据自己的喜好对其进行了样式设置，以创建我的网站顶部导航菜单： /* 在顶部添加背景颜色 </desc> <question vote="0"> <p>我使用了在 <a href="https://www.w3schools.com/howto/howto_js_responsive_navbar_dropdown.asp" rel="nofollow noreferrer">w3schools.com</a> 找到的代码，并根据自己的喜好对其进行了样式设置，以创建我的网站顶部导航菜单：</p> <p></p><div data-babel="false" data-lang="js" data-hide="false" data-console="true"> <div> <pre><code><!DOCTYPE html> <style> /* Add a background color to the top navigation */ .topnav { background-color: #0066ff; overflow: hidden; } /* Style the links inside the navigation bar */ .topnav a { float: left; display: block; color: #f2f2f2; text-align: center; padding: 14px 16px; text-decoration: none; font-size: 17px; transition-duration: 0.4s; } /* Add an active class to highlight the current page */ .active { background-color: #4d94ff; color: white; } /* Hide the link that should open and close the topnav on small screens */ .topnav .icon { display: none; } /* Dropdown container - needed to position the dropdown content */ .dropdown { float: left; overflow: hidden; } /* Style the dropdown button to fit inside the topnav */ .dropdown .dropbtn { font-size: 17px; border: none; outline: none; color: white; padding: 14px 16px; background-color: inherit; font-family: inherit; margin: 0; transition-duration: 0.4s; } /* Style the dropdown content (hidden by default) */ .dropdown-content { display: none; position: absolute; background-color: #b3d1ff; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; } /* Style the links inside the dropdown */ .dropdown-content a { float: none; color: black; padding: 12px 16px; text-decoration: none; display: block; text-align: left; } /* Add a background on topnav links and the dropdown button on hover */ .topnav a:hover, .dropdown:hover .dropbtn { background-color: #99c2ff; color: white; } /* Add a background to dropdown links on hover */ .dropdown-content a:hover { background-color: #cce0ff; color: black; } /* Show the dropdown menu when the user moves the mouse over the dropdown button */ .dropdown:hover .dropdown-content { display: block; } /* */ .content { width: 1000px; margin: 0 auto; } .content h2 { margin: 0; padding: 25px 0; font-size: 20px; border-bottom: 1px solid #e0e0e3; color: #4a536e; } .content .block { box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.1); margin: 25px 0; padding: 25px; background-color: #fff; } .content .block p { padding: 5px; margin: 0 0 10px 0; } /* When the screen is less than 1000 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */ @media screen and (max-width: 1000px) { .topnav a:not(:first-child), .dropdown .dropbtn { display: none; } .topnav a.icon { float: right; display: block; } } /* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */ @media screen and (max-width: 1000px) { .topnav.responsive {position: relative;} .topnav.responsive a.icon { position: absolute; right: 0; top: 0; } .topnav.responsive a { float: none; display: block; text-align: left; } .topnav.responsive .dropdown {float: none;} .topnav.responsive .dropdown-content {position: relative;} .topnav.responsive .dropdown .dropbtn { display: block; width: 100%; text-align: left; } @media screen and (max-width: 1000px) { .content { padding: 5px 10px; width: 100%; } } </style> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,minimum-scale=1"> <title>Home Page</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" integrity="sha512-xh6O/CkQoPOWDdYTDqeRdPCVd1SpvCA9XXcUnZS2FmJNp1coAFzvtCN9BmamE+4aHK8yyUHUSCcJHgXloTyT2A==" crossorigin="anonymous" referrerpolicy="no-referrer"> </head> <body> <div class="topnav" id="myTopnav"> <a href="../" class="active" title="Homepage"><i class="fas fa-home"></i> Home</a> <a href="/members/home.php" title="Member's Homepage"><i class="fa-solid fa-door-open"></i> Member's Homepage</a> <div class="dropdown"> <button class="dropbtn" title="Sections"><i class="fa-solid fa-link"></i> Sections <i class="fa fa-caret-down"></i> </button> <div class="dropdown-content"> <a href="/members/music/" title="Enjoy Our Music Section"><i class="fa-solid fa-music"></i> Music Section</a> <a href="/members/polls/" title="Vote in A Poll"><i class="fa-solid fa-square-poll-horizontal"></i> Polls Section</a> </div> </div> <div class="dropdown"> <button class="dropbtn" title="Help"><i class="fa-regular fa-circle-question"></i> Help <i class="fa fa-caret-down"></i> </button> <div class="dropdown-content"> <a href="/members/tickets/" title="Create a Ticket For An Issue"><i class="fas fa-ticket"></i> Ticket System</a> <a href="contact/" title="Send A Message to Site Administration"><i class="fas fa-envelope"></i> Contact Form</a> </div> </div> <a href="profile.php" title="Profile Page"><i class="fas fa-user-circle"></i> Profile</a> <a href="logout.php" title="Bye Bye"><i class="fas fa-sign-out-alt"></i> Logout</a> <a href="javascript:void(0);" class="icon" onclick="myFunction()">&#9776;</a> </div> <script> function myFunction() { var x = document.getElementById("myTopnav"); if (x.className === "topnav") { x.className += " responsive"; } else { x.className = "topnav"; } } </script> <div class="content"> <h2>Member's Page</h2> <h2>WELCOME TO THE MEMBERS ONLY SECTION!</h2> </div> </body> </html> </code></pre> </div> </div> <p></p> <p>但是我不知道如何将导航菜单中的链接与网站内容对齐。导航菜单中的链接始终位于屏幕边缘（左侧）。我希望将左侧的链接与网站内容中文本的左侧对齐（但不要超过网站内容的最右侧部分）。我还想将网站的标题放在导航菜单中，位于链接之前的左侧，但使其与网站的其他内容保持一致。</p> <p>这个样式问题有简单的解决办法吗？</p> <p>感谢任何可以提供帮助的人。</p> </question> <answer tick="false" vote="0"> <p>具有“content”类的 div 的固定宽度为 1000px，只需在 css 中将其删除即可！</p> <pre><code>.content { /*removed the width of 1000px */ margin: 0 auto; /* added padding for making it better */ padding: 10px 20px; } </code></pre> </answer> </body></html>

html css menu responsive

回答 0 投票 0

menu 相关问题

最新问题