需要帮助在html和css上构建导航栏

我是HTML和CSS的新手。我想做一个网站，我从导航栏开始，但是这个导航栏对于每个屏幕边都不是“可缩放的”，当它在全屏幕上很好时，但是当我最小化它时它不会加载该部分在右边这是“关于”。所有的菜单都指向同一页面，而现在这就是目标。下面的代码：需要帮助在html和css上构建导航栏

body {} 
 

 
.navbardiv {} 
 

 
.navbar_ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    /*overflow:hidden;*/ 
 
    background-color: #333; 
 
    border: 5px solid gray; 
 
    margin: -8px; 
 
    width: auto; 
 
    min-width: 600px; 
 
    height: 70px; 
 
} 
 

 
li { 
 
    float: left; 
 
    padding: 10px 150px; 
 
} 
 

 
li a { 
 
    display: block; 
 
    color: white; 
 
    text-align: center; 
 
    padding: 16px 16px; 
 
    text-decoration: none; 
 
} 
 

 
li a:hover { 
 
    background-color: #111; 
 
}

<!--NAVBAR--> 
 
<div class="navbardiv"> 
 
    <ul class="navbar_ul"> 
 
    <li class="navbar_li_Contact"><a href="index.html">Contact</a></li> 
 
    <li class="navbar_li_WebHosting"><a href="index.html">Webhosting</a></li> 
 
    <li class="navbar_li_About"><a href="index.html">About</a></li> 
 
    </ul> 
 
</div>

来源

2017-06-12 Samuel Ferreira

您将最小宽度设置为600px，因此当您最小化屏幕使其小于600像素时，可能会切断部分导航栏。尝试设置宽度为100％或类似的东西，看看是否有效。 – josephmbustamante

在列表项目周围还有大量的填充项，这些填充项可能会在小屏幕上查看时将它们推送到新行。 –

您要为李填充设置150px这是非常高的，你需要减少。

但是如果你想要的链接，采取全宽度和被evenlly间隔，那么你可以使用柔性盒和justify-content: space-between;

看到的代码片段：

body {} 
 

 
.navbardiv {} 
 

 
.navbar_ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    /*overflow:hidden;*/ 
 
    background-color: #333; 
 
    border: 5px solid gray; 
 
    margin: -8px; 
 
    width: auto; 
 
    min-width: 600px; 
 
    height: 70px; 
 
    display: flex; 
 
    justify-content: space-between; 
 
} 
 

 
li { 
 
    float: left; 
 
    padding: 10px 20px; 
 
} 
 

 
li a { 
 
    display: block; 
 
    color: white; 
 
    text-align: center; 
 
    padding: 16px 16px; 
 
    text-decoration: none; 
 
} 
 

 
li a:hover { 
 
    background-color: #111; 
 
}

<!--NAVBAR--> 
 
<div class="navbardiv"> 
 
    <ul class="navbar_ul"> 
 
    <li class="navbar_li_Contact"><a href="index.html">Contact</a></li> 
 
    <li class="navbar_li_WebHosting"><a href="index.html">Webhosting</a></li> 
 
    <li class="navbar_li_About"><a href="index.html">About</a></li> 
 
    </ul> 
 
</div>

来源

2017-06-12 13:05:17 Chiller

也可能将'min-width'设置为小于600px的水平，因为这会在较小的屏幕上产生问题。 – Tijmen

但是，如果我这样做，当我更改为全尺寸时，“关于”不会位于左上角，“WebHosting”将不会位于中心位置，而另一位位于左上角 –

@Tijmen我缩小为316px –

由于min-width: 600px;部分，您的导航栏无法响应。这个将会做的是，当屏幕分辨率低于600px的宽度时，它会让你的导航栏保持在600像素。因此它会将其对齐到屏幕的最左边部分，这会让您看到裁剪的右边缘。 min-width:100%;不会工作，因为它将开始裁剪时，导航栏的内部元素将不适合。

很容易解决这个问题。只需将其更改为width:100%;即可。

来源

2017-06-12 13:24:30 necilAlbayrak

需要帮助在html和css上构建导航栏

回答

相关问题