导航栏定位问题
[英]Problems with nav bar positioning
问题描述
我正在导航栏上，元素的定位似乎已关闭。 我一直在尝试查找问题，但是代码对我来说看起来不错
问题
- 导航栏链接似乎在不需要时溢出。
-
navbar-expand-md无法正常工作。 因此，当我调整页面大小时，它看起来完全错误。
任何帮助是极大的赞赏。
*{ margin: 0; padding: 0; line-height: 1; } body { margin: 0; font-family: sans-serif; background: #FFFFFF; -webkit-font-smoothing: antialiased; overflow: hidden; overflow-x: hidden; } nav { margin: 0 0 0 0; font-family: 'Lato', Sans-serif; font-size: 100%; width: 100%; } .navbar { margin: 0; padding-top: 1.5em; padding-bottom: 1.5em; padding-left: 6em; padding-right: 6em; border: none; list-style-type: none; background-color: #000; } .logo { float: left; } .navbar-brand { padding-left: 6px; text-decoration: none; color: #fff; background-color: #000; font-size: 22px; font-weight: 400; margin: 0; display: inline; } .navbar ul li { display: inline; } .navbar ul li a { right: 6em !important; text-decoration: none; color: #fff; background-color: #000; font-size: 18px; font-weight: 400; right: 6em; } .nav-link { padding-left: 20px; padding-right: 20px; } .navs { float: right; }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"> <meta name="HandheldFriendly" content="true"> <link rel="icon" href="9h.png"> <title>9haus Studios</title> <link href="graphic-design.css" type="text/css" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Lato:300,400,700,900" rel="stylesheet"> <script src="http://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script> <script src="http://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.bundle.min.js" integrity="sha384-feJI7QwhOS+hwpX2zkaeJQjeiwlhOP+SdQDqhgvvo1DsjtiSQByFdThsxO669S2D" crossorigin="anonymous"></script> <script type="text/javascript"></script> </head> <body> <nav class="navbar navbar-expand-md navbar-inverse navbar-fixed-top"> <div class="container-fluid"> <a class="logo"><img src="9haus-logo-white.png" alt="9haus logo" width="63px" height="19px"></a> <a class="navbar-brand" href="graphic-design.html">Graphic design</a> <div class="navs"> <ul class="navbar-brand"> <li class="active"><a class="nav-link" href="graphic-design.html">Work</a></li> <li><a class="nav-link" href="graphic-studio.html">Studio</a></li> <li><a class="nav-link" href="#">Services</a></li> </ul> </div> </div> </nav> </body> </html>
1 个解决方案
解决方案1
1 已采纳 2018-02-22 22:26:52
您的问题是nav {width:100%} ，应该是nav {width:auto} 。
导航栏CSS HTML下定位滑块的问题
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.