li中的一个元素在悬停在它上面时显示比它的父元素更大的元素

时间：2017-03-19 22:31:14

标签： html css css3

我目前正在为我的学校课程编写一个项目，我遇到了CSS问题。我想把所有东西装箱，但看起来并不容易。我目前的问题是a内的li元素在悬停时显示的大于其应有的值。这是我的代码：

＆＃13;
＆＃13; 
#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;
}
＆＃13; 
<!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>
＆＃13;
＆＃13;
＆＃13;

3 个答案:

答案 0 :(得分：1)

只需将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>

答案 1 :(得分：0)

 .top_menu_li a
 {
    text-decoration: none;
    text-align: center;
    display: inline-block;
    width:100%;
    height:28px;
    border-radius: 5px;
    padding-top:8px;
 }

 .top_menu_li  a:hover
 {
    background-color: #111;
 }

答案 2 :(得分：0)

我希望下面的代码解决你的问题。

我只是将悬停效果从.top_menu_li a:hover更改为.top_menu_li:hover。

＆＃13;
＆＃13; 
#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:hover{
  background-color: #111 !important;
}
#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;
}
＆＃13; 
<!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>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题