个人中心
gpt4 book ai didi

html - ol inside li 引起问题

转载 作者：行者123 更新时间：2023-11-28 00:56:39 27 4
gpt4 key购买 nike

我有以下代码:

<!DOCTYPE html>
<html>
<head>
    <title>Page Title</title>
    <meta charset="utf-8"> 

    <style>
.nav{
    border:1px solid #ccc;
    border-width:1px 0;
    list-style:none;
    margin:0;
    padding:0;
    text-align:center;
    background-color: #333;
}
.navLi{
    display:inline;
}
.nav ol{
  display:flex;

}
.nav a{
    display:inline-block;

    padding:10px;
 text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
    color:white;
}
.green{
    background-color:green;
}
.blue{
    background-color:blue;
}
.sideBar{
width:25%;
background:#333;
height: 850px;
}
.whiteColor{
  color:white;
}
.paragraph{
    padding: 20px;
    line-height: 150%;
    font-family: ariel;

}
.div1{
width: 75%;
background: white;
}
.textSize{
  font-size: 1px;
}
.div2{
    border:solid 1px;
    display:flex;
}
.image{
float:left;
}
.maxDiv{
    max-width: 1000px;
     margin: auto;
    width: 50%;
    border: 3px solid green;
    padding: 10px;
}

    </style>


</head>
<body>
<div class="maxDiv">
<div  id="myTopnav">
<ul class="nav">
 <li class="navLi"> <a href="givataiim.html" class = "green">0</a></li>
  <li  class="navLi"><a href="#news" >1</a></li>
  <li  class="navLi"><a href="#contact">2</a></li>
  <li  class="navLi"><a href="#about">3</a></li>
  <li  class="navLi"><a href="#about">4</a></li>
  <li  class="navLi"><a href="rishon.html" class = "blue">5</a></li>
  <li  class="navLi"><a href="#about">6</a></li>
  <li  class="navLi"><a href="hw9.html">7</a></li>
</ul>
</div>

我希望每个 li 下面都有一个有序列表(我知道它看起来不漂亮)我尝试在其中制作一个 ol 元素和一些 li，它看起来很奇怪。当我在每个 li 里面做 ol 时，我在那个 ol 里面放了一些 li，它看起来像这样:

enter image description here

代码:

 <li class="navLi"> <a href="1.html" class = "green">0</a>
 <ol>
  <li  class="navLi"><a href="#news" >1</a></li>
  <li  class="navLi"><a href="#news" >1</a></li>
 </ol>
 </li>

li 里面的 ol 看起来不像照片中红色方 block 标记的那样好。

有什么想法吗？

最佳答案

您可以将鼠标悬停在 4 上以查看子菜单。我清理了 CSS，删除了我找不到正在使用的类/ID。
子菜单具有绝对定位。这两个菜单现在都使用 flexbox 定义。

.nav {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  list-style: none;
  margin: 0;
  padding: 0;
}

.navLi {
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  position: relative;
}

.nav ol {
  display: none;
  position: absolute;
  background-color: red;
  list-style: none;
  padding: 0;
  margin: 1px;
}

.navLi:hover ol {
  display: flex;
  justify-content: center;
  align-items: center;
}

.navLi:hover ol li {
  padding: 14px 16px;
}

a {
  display: block;
  padding: 14px 16px;
  text-decoration: none;
  background-color: #333;
  font-size: 17px;
  color: white;
}

.green {
  background-color: green;
}

.blue {
  background-color: blue;
}

.maxDiv {
  max-width: 1000px;
  margin: auto;
  border: 3px solid green;
  padding: 10px;
  background-color: #333;
}
<div class="maxDiv">
  <ul class="nav">
    <li class="navLi"><a href="givataiim.html" class="green">0</a></li>
    <li class="navLi"><a href="#news">1</a></li>
    <li class="navLi"><a href="#contact">2</a></li>
    <li class="navLi"><a href="#about">3</a></li>
    <li class="navLi"><a href="#about">4</a>
      <ol>
        <li>1</li>
        <li>2</li>
        <li>3</li>
      </ol>
    </li>
    <li class="navLi"><a href="rishon.html" class="blue">5</a></li>
    <li class="navLi"><a href="#about">6</a></li>
    <li class="navLi"><a href="hw9.html">7</a></li>
  </ul>
</div>

关于html - ol inside li 引起问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44438078/

27 4 0
文章推荐： C++ - CreateThread - 编译错误
文章推荐： c++ - 单独的 cpp 文件中的模板化函数定义
文章推荐： javascript - JW 播放器未列出的 YouTube 视频
文章推荐： css - chrome 开发工具中的元素尺寸与 css 中设置的元素尺寸不同
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com