一个用户aaa 2024-05-08 12:40 采纳率: 40%
浏览 5
已结题

html水平导航栏overflow属性

为什么水平导航栏设置为overflow:visible后无法全部可见

<!DOCTYPE html>
<html>
<head>
<style>
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}

li {
  float: left;
}

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

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

.active {
  background-color: red;
}
</style>
</head>
<body>

<ul>
  <li><a href="#home" class="active">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
</ul>

</body>
</html>

第九行的overflow:hiden属性改为visible后只可见第一个“home”元素

img

img

展开全部

  • 写回答

2条回答 默认 最新

  • 专家-皆知 2024-05-08 12:42
    关注

    引自免费微信小程序：皆我百晓生。

    请检查是否有其他CSS属性如width、float或position导致布局问题，调整相应样式以适应内容。

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
    专家-皆知 回复 一个用户aaa 2024-05-08 12:43

    在您提供的HTML和CSS代码中，水平导航栏之所以在将overflow属性从hidden更改为visible后只能显示第一个“Home”元素，是因为float: left;导致了其他列表项溢出到下一行。要解决这个问题，您可以尝试以下方法之一：

    方法一：使用Flexbox布局 通过替换现有的浮动（float: left;）样式，使用Flexbox布局可以让所有列表项在同一行内，并且可以自动调整它们的大小。这样即使设置了overflow: visible;，所有的菜单项也会并排显示。

    修改后的CSS部分如下：

    ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  background-color: #333;
  display: flex;
  justify-content: space-between; /* 这会让每个项目之间保持均匀的距离 */
}

li a {
  display: block; /* 更改为block，以便于适应新的Flexbox布局 */
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

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

.active {
  background-color: red;
}

    这是修改后的完整HTML和CSS代码：

    <!DOCTYPE html>
<html>
<head>
<style>
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  background-color: #333;
  display: flex;
  justify-content: space-between;
}

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

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

.active {
  background-color: red;
}
</style>
</head>
<body>

<ul>
  <li><a href="#home" class="active">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
</ul>

</body>
</html>

    方法二：使用Grid布局 如果您想使用Grid布局，可以按照以下方式更改CSS：

    ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  background-color: #333;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px; /* 设置列之间的间距 */
}

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

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

.active {
  background-color: red;
}

    这是使用Grid布局的完整HTML和CSS代码：

    <!DOCTYPE html>
<html>
<head>
<style>
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  background-color: #333;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
}

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

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

.active {
  background-color: red;
}
</style>
</head>
<body>

<ul>
  <li><a href="#home" class="active">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
</ul>

</body>
</html>

    两种方法都会让导航栏在不隐藏的情况下正常显示所有链接。选择Flexbox还是Grid取决于您的具体需求和浏览器兼容性要求。

    赞
    回复
查看更多回答(1条)
编辑
预览

报告相同问题？

  • CSS实现垂直/水平导航栏
    2019-04-11 05:04
    每天都学习！的博客 水平导航栏 导航栏 = 链接列表 导航栏需要标准的 HTML 作为基础。在我们的例子中，将用标准的 HTML 列表来构建导航栏。导航栏基本上是一个链接列表，因此使用 ul 和 li 元素是非常合适的：<ul> <li>&...
  • CSS 水平导航栏
    2022-02-22 07:09
    CyberPlayer的博客 有两种创建水平导航栏的方法：使用行内或浮动列表项。 行内列表项 构建水平导航栏的一种方法是，将 <li> 元素指定为 inline： li { display: inline; } display: inline; 默认情况下，<li> 元素是...
  • 前端必知必会-CSS导航栏NavigationBar
    2024-08-24 01:00
    编程岁月的博客 本文介绍了的CSS导航栏NavigationBar创建，如有问题欢迎私信和评论。
  • 前端学习day2---导航栏、颜色
    2024-09-16 12:04
    惊呆了老铁的博客 /* 如果导航栏选项多，允许滚动 */ } 水平导航栏 有两种方法创建横向导航栏。使用内联(inline)或浮动(float)的列表项。这两种方法都很好，但如果你想链接到具有相同的大小，必须使用浮动的方法。 内联： 浮动： ...
  • overflow（溢出）4个属性值，水平/垂直溢出，文字超出显示省略号的详解
    2024-04-21 14:40
    云桃桃前端的博客 CSS 的 overflow 属性用于控制元素内容溢出时的表现方式。当元素的内容超出其指定的尺寸范围时，就会出现溢出现象。比如，一个元素的高度设置是 80px，但内容高度不只是 80px，内容此时就叫做溢出了。而 overflow ...
  • 【HTML+CSS】实现网页的导航栏和下拉菜单
    2022-10-30 08:46
    橙 子_的博客 熟练的使用导航栏，对于任何网站都非常重要，我们可以使用CSS转换为好看的导航栏而不是枯燥的HTML菜单。同时，我们使用 CSS 可以创建一个鼠标移动上去后显示下拉菜单的效果。
  • 各种CSS导航代码集合！CV即可！水平导航，垂直导航，jd粘性导航…
    2024-04-26 11:19
    云桃桃前端的博客 今天，我们综合运用之前所看到的知识，来写 3 个有代表性的导航样式。注意：文章中的 href 链接均为#，实际项目中替换为目标链接即可。
  • 【前端实例】自适应水平滑动导航条
    2019-02-22 15:49
    LaoYe - IT的博客 当屏幕小于内容显示的宽度时，用户可以通过左右滑动导航条来浏览被隐藏的内容。 【解决问题】 1、判断内容是否被隐藏  答：解决方式分为CSS和JS，前者最简单后者相对麻烦，后者因为需要获取当前容器距离左侧的...
  • 前端css+html面试题
    2025-04-02 09:28
    Angus-zoe的博客 使用overflow:hidden,让父元素成为BFC（块级格式化上下文），可以自动包裹子元素的高度使用让父元素成为BFC（块级格式化上下文）,比更语义化，不会影响overflow相关的属性。使用clearfix伪元素,使用::after伪元素...
  • 纯JS实现弹性导航条效果
    2020-10-19 22:47
    要实现纯JavaScript的弹性导航条效果，我们可以采用HTML、CSS和JavaScript这三部分技术。以下是对本文提及知识点的详细解释： HTML结构部分： 首先，我们定义了一个无序列表`<ul>`，它包含多个列表项`<li>`，每个...
  • 没有解决我的问题, 去提问

问题事件

  • 系统已结题 5月15日
  • 已采纳回答 5月8日
  • 创建了问题 5月8日
手机看
程序员都在用的中文IT技术交流社区

程序员都在用的中文IT技术交流社区

专业的中文 IT 技术社区，与千万技术人共成长

专业的中文 IT 技术社区，与千万技术人共成长

关注【CSDN】视频号，行业资讯、技术分享精彩不断，直播好礼送不停！

关注【CSDN】视频号，行业资讯、技术分享精彩不断，直播好礼送不停！

 客服 返回
顶部