个人中心
gpt4 book ai didi

html - li 中的一个元素在悬停在其上时显示比其父元素大

转载 作者：太空宇宙 更新时间：2023-11-04 08:59:01 25 4
gpt4 key购买 nike

我目前正在为我的学校类(class)编写一个元素，但我对 CSS 有疑问。我想把所有东西都打包起来，但这似乎并不容易。我当前的问题是我的 a 元素在 li 中，悬停时显示的比预期的要大。这是我的代码:

#main{
  position: absolute;
  top:0;
  right: 0;
  left:0;
  bottom:0;
}
#main_head{
  position: absolute;
  background-color: #b3fff0;
  height:65px;
  min-width: 100%;
  z-index: 5;
}
#logo{
  position: absolute;
  height:100%;
  left:45%;
  top:0;
}
#logo_img{
  position:absolute;
  top:30%;
  width: 80px;
  height: 75px;
  border-radius: 10px;
}
#top_menu{	
  position: absolute;
  width: 100%;
  height:65px;
  background-color: #111;
  top:0;
}

#top_menu_left {
  position: relative;
  left:14%;
  width: 30%;
  height: 100%;
  top:0;
  background-color: red;
}
#top_menu_left ul{
  padding-top:0;
  margin: 0;
  width:100%;
  height: 100%;
  list-style-type: none;
  text-decoration: none;
  background-color:blue;
}

#top_menu_left  li {
  position:relative;
  display: block;
  color: white;
  right:0
  left:0;
  width:30%;
  height:35px;
  text-align: center;
  text-decoration: none;
  list-style-type: none;
  float:left;
  margin:2px;
  border-radius: 5px;
  background-color: red;
}
.top_menu_li a{
  text-decoration: none;
  text-align: center;
  display: inline-block;
  width:100%;
  height:35px;
  padding-top:8px;
}
.top_menu_li  a:hover{
  background-color: #111;
}
#left_menu{
  position:absolute;
  background-color: grey;
  left:0;
  top:0;
  width: 160px;
  height: 100%;
  z-index: 4;
}
#footer{
  position: absolute;
  bottom: 0;
  width:100%;
  height: 25px;
  z-index:5;
  background-color: blue;
}
<!DOCTYPE html>
  <html lang="pl">
  <head>
  <meta charset="utf-8">
  </head>
  <body>
  <div id="main">
    <div id="main_head">
      <div id="top_menu">
      <div id="top_menu_left">
      <ul id="topleft_ul">
        <li class="top_menu_li"><a href="">NEWS</a></li>
        <li class="top_menu_li"><a href="">WEATHER</a></li>
      </ul>
      </div>

      <div id="logo">
        <a href="/">
          <img id="logo_img" src="logo.png" alt="logo image">  </img>
        </a>

      </div>
      </div>
    </div>

    <div id="left_menu">
      <div style=" padding-top:65px; font-family: Arial;background-color: #fbfbfb;border: 1px solid #e7e7e7;width: 160px;height: 255px;-moz-box-shadow: 0 0 2px 1px #e7e7e7;-webkit-box-shadow: 0 0 2px 1px #e7e7e7;box-shadow: 0 0 2px 1px #e7e7e7;overflow: hidden; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px;"><div style="width: 160px;height: 255px;"><div style="margin:7px 10px;"><div style="color: #222222;font-family: Arial;font-size: 12px;font-weight: bold;margin: 0px 0px 7px 0px;line-height: 14px;">Prognoza pogody<br/><span style="font-weight:normal;">Bytów</span></div><iframe id="widget-frame" src="http://www.meteovista.pl/Go/ExternalWidgetsNew/ThreeDaysCity?gid=4078297&sizeType=2&temperatureScale=Celsius&defaultSettings=False" width="140" height="142" frameborder="0" scrolling="no" style="border: none;" allowtransparency="true"></iframe><a href="http://www.meteovista.pl/Europa/Polska/Bytow/4078297" style="background: url(http://www.meteovista.pl/Shared/Images/list_icon_blue_trans.png) no-repeat scroll left 1px transparent;color: #0160b2;font-family: Arial;font-size: 12px;font-weight: normal;padding-left: 14px;margin: 7px 0px 5px 0px;line-height: 12px;outline: none;text-decoration: none;display: inline-block;" target="_blank">Pogoda - Bytów</a><a href="http://www.meteovista.pl/" style="display: block;height: 25px;width: 113px;margin: 0px 10px 8px 0px;outline: none;text-decoration: none;" title="Meteovista.pl Zawsze aktualna pogoda" target="_blank"><img src="http://www.meteovista.pl/Shared/Images/variations/pl-PL/new-widget-logo-PL-color.png" width="113" height="25" alt="Meteovista.pl Zawsze aktualna pogoda" style="border: none;background-color: transparent;box-shadow: none;" /></a></div></div></div>
    </div>


    <div id="section_main">
      <section>


      </section>
    </div>
    <div id="footer">
    </div>
  </div>
  </body>
  <

/html>

最佳答案

只需将 box-sizing:border-box 添加到 li a 元素即可。

.top_menu_li a{
box-sizing:border-box
}

引用box-sizing

#main{
  position: absolute;
  top:0;
  right: 0;
  left:0;
  bottom:0;
}
#main_head{
  position: absolute;
  background-color: #b3fff0;
  height:65px;
  min-width: 100%;
  z-index: 5;
}
#logo{
  position: absolute;
  height:100%;
  left:45%;
  top:0;
}
#logo_img{
  position:absolute;
  top:30%;
  width: 80px;
  height: 75px;
  border-radius: 10px;
}
#top_menu{	
  position: absolute;
  width: 100%;
  height:65px;
  background-color: #111;
  top:0;
}

#top_menu_left {
  position: relative;
  left:14%;
  width: 30%;
  height: 100%;
  top:0;
  background-color: red;
}
#top_menu_left ul{
  padding-top:0;
  margin: 0;
  width:100%;
  height: 100%;
  list-style-type: none;
  text-decoration: none;
  background-color:blue;
}

#top_menu_left  li {
  position:relative;
  display: block;
  color: white;
  right:0
  left:0;
  width:30%;
  height:35px;
  text-align: center;
  text-decoration: none;
  list-style-type: none;
  float:left;
  margin:2px;
  border-radius: 5px;
  background-color: red;

}
.top_menu_li a{
  text-decoration: none;
  text-align: center;
  display: inline-block;
  width:100%;
  height:35px;
  padding-top:8px;
    box-sizing:border-box;
}
.top_menu_li  a:hover{
  background-color: #111;
}
#left_menu{
  position:absolute;
  background-color: grey;
  left:0;
  top:0;
  width: 160px;
  height: 100%;
  z-index: 4;
}
#footer{
  position: absolute;
  bottom: 0;
  width:100%;
  height: 25px;
  z-index:5;
  background-color: blue;
}
<!DOCTYPE html>
  <html lang="pl">
  <head>
  <meta charset="utf-8">
  </head>
  <body>
  <div id="main">
    <div id="main_head">
      <div id="top_menu">
      <div id="top_menu_left">
      <ul id="topleft_ul">
        <li class="top_menu_li"><a href="">NEWS</a></li>
        <li class="top_menu_li"><a href="">WEATHER</a></li>
      </ul>
      </div>

      <div id="logo">
        <a href="/">
          <img id="logo_img" src="logo.png" alt="logo image">  </img>
        </a>

      </div>
      </div>
    </div>

    <div id="left_menu">
      <div style=" padding-top:65px; font-family: Arial;background-color: #fbfbfb;border: 1px solid #e7e7e7;width: 160px;height: 255px;-moz-box-shadow: 0 0 2px 1px #e7e7e7;-webkit-box-shadow: 0 0 2px 1px #e7e7e7;box-shadow: 0 0 2px 1px #e7e7e7;overflow: hidden; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px;"><div style="width: 160px;height: 255px;"><div style="margin:7px 10px;"><div style="color: #222222;font-family: Arial;font-size: 12px;font-weight: bold;margin: 0px 0px 7px 0px;line-height: 14px;">Prognoza pogody<br/><span style="font-weight:normal;">Bytów</span></div><iframe id="widget-frame" src="http://www.meteovista.pl/Go/ExternalWidgetsNew/ThreeDaysCity?gid=4078297&sizeType=2&temperatureScale=Celsius&defaultSettings=False" width="140" height="142" frameborder="0" scrolling="no" style="border: none;" allowtransparency="true"></iframe><a href="http://www.meteovista.pl/Europa/Polska/Bytow/4078297" style="background: url(http://www.meteovista.pl/Shared/Images/list_icon_blue_trans.png) no-repeat scroll left 1px transparent;color: #0160b2;font-family: Arial;font-size: 12px;font-weight: normal;padding-left: 14px;margin: 7px 0px 5px 0px;line-height: 12px;outline: none;text-decoration: none;display: inline-block;" target="_blank">Pogoda - Bytów</a><a href="http://www.meteovista.pl/" style="display: block;height: 25px;width: 113px;margin: 0px 10px 8px 0px;outline: none;text-decoration: none;" title="Meteovista.pl Zawsze aktualna pogoda" target="_blank"><img src="http://www.meteovista.pl/Shared/Images/variations/pl-PL/new-widget-logo-PL-color.png" width="113" height="25" alt="Meteovista.pl Zawsze aktualna pogoda" style="border: none;background-color: transparent;box-shadow: none;" /></a></div></div></div>
    </div>


    <div id="section_main">
      <section>


      </section>
    </div>
    <div id="footer">
    </div>
  </div>
  </body>
  <

/html>

关于html - li 中的一个元素在悬停在其上时显示比其父元素大，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42893077/

25 4 0
文章推荐： python - 使用 np.arctan2 进行循环
文章推荐： linux - 在文件内搜索和替换
文章推荐： python - flask jsonify : how to escape characters
文章推荐： php - Ezpublish 使用这两个 CRON 文件中的哪个 cron 文件
太空宇宙
个人简介

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

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