html - <ul>背景色也遍布整个图像

Closed. This question is off-topic。它当前不接受答案。












                            想改善这个问题吗？ Update the question，所以它是on-topic，用于堆栈溢出。

                        上个月关闭。



我想有一个蓝色背景的导航栏，但<ul>的背景也在图像下方。怎么了？

我是一个初学者，这似乎与HTML DOM对齐有关。

ul.nav {
  padding: 20px;
  background-color: lightblue;
  border-radius: 20px;
  list-style: none;
  overflow: hidden;
  margin-block-end: 30px;
}

.nav li {
  float: left;
}

.nav li a {
  text-decoration: none;
  color: white;
  padding: 10px 20px 10px 20px;
}

.nav li a:hover {
  color: gray;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: auto;
  background-size: cover;
}

<ul class="nav">
  <li><a href="#"> Head</a></li>
  <li><a href="#"> About me</a></li>
  <li><a href="#"> Business</a></li>
  <li><a href="#"> Technology</a></li>
  <li><a href="#"> Finance</a></li>
  <ul><br><br>
    <div>
      <img src="./image.JPG" alt="my face">
      <div>

最佳答案

我已经编辑了您的代码。希望这对您有用！

ul.nav {
  padding: 20px;
  background-color: lightblue;
  border-radius: 20px;
  list-style: none;
  overflow: hidden;
  margin-block-end: 30px;
}

.nav li {
  float: left;
}

.nav li a {
  text-decoration: none;
  color: white;
  padding: 10px 20px 10px 20px;
}

.nav li a:hover {
  color: gray;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: auto;
  background-size: cover;
}

<ul class="nav">
  <li><a href="#"> Head</a></li>
  <li><a href="#"> About me</a></li>
  <li><a href="#"> Business</a></li>
  <li><a href="#"> Technology</a></li>
  <li><a href="#"> Finance</a></li>
  </ul><br><br>
    <div>
      <img src="https://upload.wikimedia.org/wikipedia/commons/f/f9/Phoenicopterus_ruber_in_S%C3%A3o_Paulo_Zoo.jpg" alt="my face">
      </div>

关于html - <ul>背景色也遍布整个图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59349365/

上一篇：javascript - 有没有一种方法可以检查容器是否需要滚动条？

下一篇：html - 在 flex 容器中将搜索字段居中，同时将 Logo 保持在右侧？

相关文章：

css - 固定 Fluid margin-top 随着浏览器宽度的增加而增加

html - 允许 HTML 内容缩放，这样内容就不会聚集在一起

php - jquery向下滑动-向上滑动的表单-第一次默认隐藏，

php - 如何使用参数和 php 滑动弹出窗口(html)

html - 这个 css 规则 -ms-high-contrast-adjust 是什么？

html - 如何在 Bootstrap 中创建具有固定高度和滚动的全宽表格？

html - Bootstrap 嵌套行和列未正确堆叠

css - LESS Bootstrap 作为引用包括内容

css - 如何在 IE 上使用 css 过滤器

html - 为什么图像不会加载到使用 html 和 css 的网站的移动版本上？