首页    技术博客    PHP教程    数据库技术    前端开发   HTML5    Nginx    php论坛
新用户注册 | 会员登录
加入会员，解锁专属内容
取消
热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

将内联导航项列表设置为容器的整个高度-Makelistofinlinenavitemsthefullheightofthecontainer

作者：mobiledu2502924307 | 来源：互联网 | 2023-05-16 21:34
Iamusinganinlinelistasanavmenu,andIwouldlikethehyperlinklistitemtotakeuptheful

I am using an inline list as a nav menu, and I would like the hyperlink/list item to take up the full height of the container with the label vertically positioned in the center of the container. Here is what I have:

我使用内联列表作为导航菜单，我希望超链接/列表项占据容器的整个高度，标签垂直位于容器的中心。这是我有的：

#top-nav-container {
  font-size: 14px;
  width: 100%;
  height: 50px;
  overflow: hidden;
  top: 0;
  left: 0;
  position: fixed;
  z-index: 500;
  background: #3498db;
}
#top-nav-container .nav-contents {
  height: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
}
#top-nav-container .nav-left {
  width: 175px;
}
#top-nav-container .nav-mid {} #top-nav-container .nav-right {
  margin-left: auto;
  text-align: right;
  width: 250px;
}
#top-nav-container .top-nav-logo {
  max-height: 35px;
  float: left;
}
#top-nav-container ul {
  margin: 0 0 0 30px;
  padding: 0;
  float: left;
  list-style: none;
  display: flex;
  /* Removes whitespace between li elements */
  flex-direction: row;
  align-items: center;
}
#top-nav-container ul li {} #top-nav-container li a {
  text-decoration: none;
  background: red;
  border-right: 1px solid #fff;
  color: #fff;
  padding: 0 12px;
}


  


    

      
        
      
    


    


      

    


    

      Stuff here...

Any other suggestions you have with any of this is greatly appreciated.

我们非常感谢您对此提出的任何其他建议。

2 个解决方案

#1

1  

You need to add both height and line-height to the links, and also make sure they are either display: block or display: inline-block. Note that inline-block would be preferred:

您需要为链接添加高度和行高，并确保它们是display：block或display：inline-block。请注意，内联块将是首选：

#top-nav-container li a {
  height: 50px;
  line-height: 50px;
  display: inline-block;
}

Note that on small screens, the Stuff Here... div would get cut off due to having a current width of 250px. Simply turn this down to say 50px (or however wide your container would actually be):

请注意，在小屏幕上，由于当前宽度为250px，Stuff Here ... div会被切断。只需将其调低至50px（或实际宽容量）：

#top-nav-container .nav-right {
    width: 50px;
}

I've created a fiddle showing this here.

我在这里创造了一个小提琴。

Hope this helps! :)

希望这可以帮助！ :)

#2

0  

You need to modify your CSS a little, see the following snippet:

您需要稍微修改一下CSS，请参阅以下代码段：

#top-nav-container {
  font-size: 14px;
  width: 100%;
  height: 50px;
  overflow: hidden;
  top: 0;
  left: 0;
  position: fixed;
  z-index: 500;
  background: #3498db;
}
#top-nav-container .nav-contents {
  height: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
}
#top-nav-container .nav-left {
  width: 175px;
}
#top-nav-container .nav-mid {
  /* all below rules were added*/
  position: absolute;
  line-height: 50px;
  height: 100%;
  left: 50%;
  transform: translateX(-50%);
}
#top-nav-container .nav-right {
  margin-left: auto;
  text-align: right;
  width: 250px;
}
#top-nav-container .top-nav-logo {
  max-height: 35px;
  float: left;
}
#top-nav-container ul {
  margin: 0 0 0 30px;
  padding: 0;
  float: left;
  list-style: none;
  display: flex;
  /* Removes whitespace between li elements */
  flex-direction: row;
  align-items: center;
}
#top-nav-container ul li {} #top-nav-container li a {
  text-decoration: none;
  background: red;
  border-right: 1px solid #fff;
  color: #fff;
  padding: 0 12px;
  /* all below rules were added*/
  height: 50px;
  line-height: 50px;
  display: inline-block;
}


  


    

      
        
      
    


    


      

    


    

      Stuff here...


推荐阅读
author-avatar
mobiledu2502924307
这个家伙很懒，什么也没留下！
Tags | 热门标签
RankList | 热门文章
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有