时间戳

首页 > 解决方案 > 我希望我的 div 在图像下方，但它是重叠的，我找不到原因

html - 我希望我的 div 在图像下方，但它是重叠的，我找不到原因

问题描述

可能非常容易。但是，我是编码新手，这是我的第一个人事项目。我希望 div 中的列表显示在 image1 之后，并且它当前位于图像之上

.image1 {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 75%;
}

#list {
  position: relative;
  text-align: center;
  color: blue;
}

ul {
  padding: 20px;
  list-style: none;
  font-size: 40px;
}

ul li {
  margin: 15px;
  text-align: center;
}
<header>
  <h1><strong>G.M.S.</strong> <br> Soudure Générale</h1>
  <img src="images/soudeur.jpg" alt="Soudeur" class="image1">
</header>

<div id="list">
  <h2>Specialités<br>Réparation et Modification</h2>

  <ul>
    <li>Rampe</li>
    <li>Balcon</li>
    <li>Escalier</li>
    <li>Tourelle</li>
    <li>Cloture</li>
    <li>Grillage</li>
  </ul>
</div>

标签： htmlcss

解决方案

在我看来还可以。如果您像您所说的那样是初学者，则应该在codepen.io 之类的页面中进行试验， 您的问题可能是由您正在使用的内容管理系统或站点生成器中包含的其他一些 css 引起的。您应该使用 firefox 检查器或您正在运行的浏览器中的类似工具检查应用的规则。可能是浮点数，或者在通用 img 标签或包含标题上修复大小+溢出。

.image1 {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 75%;
}

#list {
  position: relative;
  text-align: center;
  color: blue;
}

ul {
  padding: 20px;
  list-style: none;
  font-size: 40px;
}

ul li {
  margin: 15px;
  text-align: center;
}
<header> 
    <h1><strong>G.M.S.</strong> <br> Soudure Générale</h1>
    <img src="https://i.imgur.com/oqVsHoTl.jpg" alt="Soudeur" class="image1">
</header>



<div id="list">
    <h2>Specialités<br>Réparation et Modification</h2>
    
    <ul>
        <li>Rampe</li>
        <li>Balcon</li>
        <li>Escalier</li>
        <li>Tourelle</li>
        <li>Cloture</li>
        <li>Grillage</li>
    </ul>



</div>

推荐阅读