为什么下拉菜单的内边距不会随着父元素内边距的增加而增加？

源码客栈 2024年04月16日 10:03 毕业设计 1

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8" />
  <title>Document</title>
  <link rel="stylesheet" href="/css/reset.css" />
  <link rel="stylesheet" href="/fa/css/all.css" />
  <style>
   header::before,
   header::after {
    content: "";
    clear: both;
    display: table;
   }
   header {
    font-size: 12px;
    color: #999;
    line-height: 30px;
    border-bottom: #ddd solid 1px;
    background-color: #e3e4e5;
   }
   .inner-wrapper {
    width: 1190px;
    margin: 0 auto;
   }
   .location {
    float: left;
    padding:0 10px;
   }
   .location:hover{
     background-color: white;
   }
   .pull-down-list{
     height:433px;
     width:302px;
     background-color: white;
     display: none;
     border:solid rgb(204,204,204) 1px;
     position:absolute;
     box-shadow:0 0 2px rgba(0,0,0,.2)

   }
   .location:hover > .pull-down-list{
     display:block;
   }
   ul {
    float: right;
   }
   ul li {
    float: left;
    color: #999;
    text-decoration: none;
   }
   a {
    color: #999;
    text-decoration: none;
   }
   a:hover {
    color: red;
   }
   .fa-map-marker-alt {
    color: red;
   }
   .cutting-line {
    height: 10px;
    width: 1px;
    background-color: #ccc;
    float: left;
    margin: 10px 12px;
   }
   #last{
     margin-right:50px;
   }
  </style>
 </head>
 <body>
  <header>
   <div >
    <div >
     <a href="javascript:;">
      <i ></i>广东
     </a>
     <div ></div>
    </div>

    <ul>
     <li><a href="javascript:;">你好，请登录</a></li>
     <li ></li>

     <li>
      <a href="javascript:;" >免费注册</a>
      <li ></li>
    </li>
     <li>
      <a href="javascript:;">我的订单</a>
      <li ></li>
    </li>
     <li>
      <a href="javascript:;"
       >我的京东<i ></i>
      </a>
      <li ></li>
    </li>
     <li>
      <a href="javascript:;">京东会员</a>
      <li ></li>
    </li>
     <li>
      <a href="javascript:;" 
       >政企采购<i ></i>
      </a>
    </li>
      <li ></li>
      <li>客户服务<i ></i></li>
      <li ></li>
      <li>网站导航<i ></i></li>
      <li ></li>
     <li>手机京东</li>
     <li ></li>
     <li>
      <a id="last" href="javascript:;">网站无障碍</a>
     </li>
    </ul>
   </div>
  </header>
 </body>
</html>

共1条回复我来回复

毕设项目助手
这个人很懒，什么都没有留下～
评论

内边距padding的含义: 内容到border的区域 css有两大特性：继承性和层叠性像一些盒子元素属性，定位的元素（浮动，绝对定位，固定定位）不能继承。

盒模型的属性 width：内容的宽度

height: 内容的高度

padding：内边距，边框到内容的距离

border: 边框，就是指的盒子的宽度

margin：外边距，盒子边框到附近最近盒子的距离

** 所以padding也是无法继承的！** 你的问题就能想明白了，建议去学习一下上述知识点，谢谢！

0条评论

发表回复

登录后才能评论

为什么下拉菜单的内边距不会随着父元素内边距的增加而增加？

回复

发表回复

随便看看

热门回答