Question

这是我左侧导航菜单栏的一部分。我希望文本只是在彼此之下并且不与图像缩略图重叠。

How can i make the text not overlap the image?

这是我对leftnav的css：

#leftNav {
  height: auto;
  width: 16%; 
  background: #f5f5f5; 
  float:left;
  position:absolute;
}
leftNav img {
  vertical-align: middle;
  padding-right: 10px;
}
leftNav ul{
  text-decoration:none;
  list-style: none;
  font-family: Verdana, Geneva, sans-serif;
  font-size: 13px;
  position: relative;
  padding: 0 0 1px 0;
  float: left;
}

leftNav a{
  display:block;
  padding: 5px 13px 5px 5px;
  text-transform:uppercase;
  border-bottom: 1px dashed #FFF;
  text-decoration:none;
  color:#000;
}
leftNav a:hover{
  background-color:#fce4ec;
}
leftNav ul li{
  list-style:none;
}
leftNav .sub-arrow:after {
  content: '\203A';
  float:right;
}
leftNav ul li a:hover {
  display: block;
  color:#b71c1c;
}

这是我的leftnav的html代码。我根据需要将它们显示在一个长列表中。我也有一个问题，leftnav与页脚重叠。那会是因为我的CSS设置为“亲戚”吗？

    <div id="leftNav">
          <leftNav>
            <ul>
            <li><a href=""><i class="fa fa-external-link-square" style="font-size:14px;"></i> Quick Links <span class="sub-arrow"></span></a></li>
            <li><a href="contactUs.php"><i class="  fa fa-envelope-o" style="font-size:14px;"></i> Contact Us <span class="sub-arrow"></span></a></li>
            <li><a href="locations.php"><i class="fa fa-location-arrow" style="font-size:14px;"></i> Locations <span class="sub-arrow"></span></a></li>
            <li><a href="projects.php"><i class="fa fa-list" style="font-size:14px;"></i> Projects <span class="sub-arrow" style="-webkit-transform: rotate(90deg);"></span></a></li>
            <ul>
                <li><a style="text-align: center;" ><strong>House and lots</strong></a></li>
                <li><a href="avidaDasma.php"><img src="assets/thumnail/Dasma.jpg" height="50" width="50"  />Avida Dasma</a></li>
                <li><a href="avidaPulilan.php"><img src="assets/thumnail/Pulilan.jpg" height="50" width="50"  />Avida Pulilan</a></li>
                <li><a href="avidaNuvali.php"><img src="assets/thumnail/Nuvali.jpg" height="50" width="50"  />Avida Nuvali Parkway</a></li>
                <li><a href="avidaCatalina.php"><img src="assets/thumnail/Catalina.jpg" height="50" width="50"  />Avida Catalina</a></li>
                <li><a href="avidaAltaraza.php"><img src="assets/thumnail/Altaraza.jpg" height="50" width="50"  />Avida Altaraza</a></li>
                <li><a href="avidaAlviera.php"><img src="assets/thumnail/Alviera.jpg" height="50" width="50"  />Avida Alviera</a></li>
                <li><a href="avidaBatangas.php"><img src="assets/thumnail/Batangas.jpg" height="50" width="50"  />Avida Batangas</a></li>
                <li><a href="avidaCabanatuan.php"><img src="assets/thumnail/Cabanatuan.jpg" height="50" width="50"  />Avida Cabanatuan</a></li>
                <li><a href="avidaCavite.php"><img src="assets/thumnail/Cavite.jpg" height="50" width="50"  />Avida Cavite</a></li>
                <li><a href="avidaLipa.php"><img src="assets/thumnail/Lipa.jpg" height="50" width="50"  />Avida Lipa</a></li>
                <li><a href="avidaNuvaliSouthfield.php"><img src="assets/thumnail/NuvaliSouthfield.jpg" height="50" width="50"  />Avida Nuvali Southfield</a></li>
                <li><a href="avidaCerise.php"><img src="assets/thumnail/Cerise.jpg" height="50" width="50"  />Avida Cerise</a></li>
                <li><a href="avidaIloilo.php"><img src="assets/thumnail/Iloilo.jpg" height="50" width="50"  />Avida Iloilo</a></li>
                <li><a href="avidaNorthPoint.php"><img src="assets/thumnail/NorthPoint.jpg" height="50" width="50"  />Avida North Point</a></li>
                <li><a href="avidaCecilia.php"><img src="assets/thumnail/Cecilia.jpg" height="50" width="50"  />Avida Santa Cecilia</a></li>
                <li><a href="avidaNuvaliWoodhill.php"><img src="assets/thumnail/NuvaliWoodhill.jpg" height="50" width="50"  />Avida Nuvali Woodhill</a></li>
                <li><a href="hillcrestNuvali.php"><img src="assets/thumnail/hillcrestNuvali.jpg" height="50" width="50"  />Hillcrest Nuvali</a></li>
                <li><a href="maderaGrove.php"><img src="assets/thumnail/maderaGrove.jpg" height="50" width="50"  />Madera Grove</a></li>
                <li><a href="ridgeviewNuvali.php"><img src="assets/thumnail/ridgeviewNuvali.jpg" height="50" width="50"  />Ridgeview Nuvali</a></li>
                <li><a href="southGrove.php"><img src="assets/thumnail/southGrove.jpg" height="50" width="50"  />South Grove</a></li>
                <li><a style="text-align: center;"><strong>Condominiums</strong></a></li>
                <li><a href="avidaClover.php"><img src="assets/thumnail/Clover.jpg" height="50" width="50"  />Avida Cloverfield</a></li>
              </ul>
            </ul>
          </leftNav>
        </div>

Answer 1

为图片添加一些边距底部：

leftNav img {
  vertical-align: middle;
  padding-right: 10px;
  margin-bottom:20px;
}

由于导航栏的绝对位置，重叠是sur，因此您可以尝试使用此代码：

#leftNav {
  height: auto;
  width: 16%; 
  background: #f5f5f5;
  left:0;
  top:0;
  bottom:20px; /* change this value to at least the height of the footer*/
  position:absolute;
}

如何让我的文字不与图像重叠

1 个答案: