HTML 下拉框搞砸了文本-6ren

HTML 下拉框搞砸了文本

转载作者：太空宇宙更新时间：2023-11-04 03:00:34

25

4

我有一个使用 HTML 和 CSS 的下拉框，但是如果下拉框的任何部分与网页上的文本重叠，文本就会偏移很多。有没有一种方法可以更改我的代码，让方框隐藏文本而不是弄乱格式？

index.html:

<body>
    <div id="header">
      <h1>Kookerus' Projects</h1>
    </div>
    <div id="dropdown">
      <ul>
        <li><a href="http://kookerus.github.io">Home</a></li>
        <li><a href="#">About</a></li>
          <li>
            <a href="/projects/batch-interpreter/index.html">Batch Interpreter &#9662;</a>
            <ul>
              <li><a href="/projects/batch-interpreter/about.html">About</a></li>
              <li><a href="#">View on Github</a></li>
            </ul>
          </li>
        <li><a href="/contact.html">Contact</a></li>
      </ul>
    </div>
</body>

样式.css:

#header{
  height: 50px;
  width: 100%;
  background-color: #CC00CC;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  color: white;
  margin-top: 0;
  padding: 0;
  border: 0;
  vertical-align: baseline;
  margin: 0;
  padding: 0;
  border: 0;
}
#nav {
  width: 100%;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  color: white;
  margin-top: 50px;
  margin-bottom
  padding: 0;
  border: 0;
  vertical-align: baseline;
  margin: 0;
  padding: 0;
  border: 0;
}
#about{
  width: 100%;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  margin-top: 0;
  padding: 0;
  border: 0;
  vertical-align: baseline;
  margin: 0;
  padding: 0;
  border: 0
}
.center { /*simple class to center the text*/
  text-align: center;
  }
h1 {
    margin: 0;
    padding: 0;
    border: 0;
}
ul {
  display: inline;
  padding: 0;
  list-style: none;
}
ul li {
  float: left;
  width: 150px;
  text-align: center;
  line-height: 21px;
}
ul li a {
  display: block;
  padding: 5px 10px;
  color: #333;
  background: #f2f2f2;
  text-decoration: none;
}
ul li a:hover {
  color: #fff;
  background: #939393;
}
ul li ul {
  display: none;
}
ul li:hover ul {
  display: block; /* display the dropdown */
}

> JSFiddle

最佳答案

在你的下拉列表中 ul 使用 position: absolute 并使其父级 li 相对

ul li ul{
  position: absolute;
}
ul li{
position: relative;
}

关于HTML 下拉框搞砸了文本，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31400123/

25

4

0

文章推荐： html - 标 checkout 现在我的 DIV 中

文章推荐： javascript - 如何在回调函数中访问 "this"的两个上下文？

文章推荐： javascript - 如何使用 Node.js 克隆 github 存储库

文章推荐： Javascript - 单击时应该消失的 block 重新出现在其他地方

真正“搞”懂HTTP协议10之缓存控制
　　HTTP缓存相关的问题好像是前端面试中比较常见的问题了，上来就会问什么cache-control字段有哪些，有啥区别啥的。嗯……说实话，我觉得至少在本篇来说，HTTP缓存还算不上复杂，只是字段稍
真正“搞”懂HTTP协议11之代理服务
　　代理，其实全称应该叫做代理服务器，它是客户端与服务器之间得中间层，本质上来说代理就是一个服务器，在HTTP的链路中插入的一个中间环节，就是代理服务器啦。所谓的代理服务就是指：服务本身不生产内容，
真正“搞”懂HTTP协议12之缓存代理
　　我们在前两篇的内容中分别学习了缓存和代理，大致了解了缓存有哪些头字段，代理是如何服务于服务器和客户端的，那么把两者结合起来，代理缓存，也就是说代理服务器也可以缓存，当客户端请求数据的时候，未必一
真正“搞”懂HTTP协议13之HTTP2
　　在前面的章节，我们把HTTP/1.1的大部分核心内容都过了一遍，并且给出了基于Node环境的一部分示例代码，想必大家对HTTP/1.1已经不再陌生，那么HTTP/1.1的学习基本上就结束了。这两
真正“搞”懂HTTP协议14之HTTP3
　　我们前一篇学习了HTTP/2，相比于HTTP/1，HTTP/2在性能上有了大幅的改进，但是HTTP/2因为底层还是基于TCP协议的，虽然HTTP/2在应用层引入了流的概念，利用多路复用解决了队头
真正“搞”懂HTTPS协议15之安全的定义
　　前面我们花了很大的篇幅来讲HTTP在性能上的改进，从1.0到1.1，再到2.0、3.0，HTTP通过替换底层协议，解决了一直阻塞性能提升的队头阻塞问题，在性能上达到了极致。　　那么，接下
真正“搞”懂HTTPS协议16之安全的实现
　　上一篇噢，我们搞明白了什么是安全的通信，这个很重要，特别重要，敲黑板！！　　然后，我们还学了HTTPS到底是什么，以及HTTPS真正的核心SSL/TLS是什么。最后我们还聊了聊TLS的实
真正“搞”懂HTTPS协议17之TLS握手
　　经过前两章的学习，我们知道了通信安全的定义以及TLS对其的实现~有了这些知识作为基础，我们现在可以正式的开始研究HTTPS和TLS协议了。嗯……现在才真正开始。　　我记得之前大概聊过，当
真正“搞”懂HTTP协议07之队头阻塞真的很烦人
　　这一篇文章，我们核心要聊的事情就是HTTP的对头阻塞问题，因为HTTP的核心改进其实就是在解决HTTP的队头阻塞。所以，我们会讲的理论多一些，而实践其实很少，要学习的头字段也只有一个，我会在最开始
真正“搞”懂HTTP协议09之这个饼干不能吃
　　我们在之前的文章中介绍HTTP特性的时候聊过，HTTP是无状态的，每次聊起HTTP特性的时候，我都会回忆一下从前辉煌的日子，也就是互联网变革的初期，那时候其实HTTP不需要有状态，就是个浏览页面
真正“搞”懂HTTP协议05之What'sHTTP？
　　前面几篇文章，我从纵向的空间到横向的时间，再到一个具体的小栗子，可以说是全方位，无死角的覆盖了HTTP的大部分基本框架，但是我聊的都太宽泛了，很多内容都是一笔带过，再加上一句后面再说就草草结束了。
搞 Go 要了解的 2 个 Header，你知道吗？
大家好，我是煎鱼。在 Go 语言中总是有一些看上去奇奇怪怪的东西，咋一眼一看感觉很熟悉，但又不理解其在 Go 代码中的实际意义，面试官却爱问... 今天要给大家介绍的是 SliceHead

首页

博学

6Ren·AI

商城

HTML 下拉框搞砸了文本