代码之家  ›  专栏  ›  技术社区  ›  maddie

` ul`元素周围带方框阴影和边距

margin html-lists css html
  •  0
  • maddie  · 技术社区  · 6 年前

    我正在尝试重新创建此页面 team/leadership page :

    我在我的 ul element周围放置了一个方框阴影,正如上面的示例所示。我无法以相同的方式获得 li->elements的边距-我将右边距设置为5 px,但它仍然以白色边框。如何使页边距(或LI元素之间的空格)仅填充DIV的背景色(在本例中为 ul->code>)。

    jfiddle此处: http://jsfiddle.net/mzechar/gyo6t25e/10/

    HTML:。 

    <section class=“content wrapper team”>
<H3>哥伦比亚</H3>
<DIV class=“团队列表”>
<ul>
<li>
<div class=“团队成员列表包装器”>
<DIV class=“圆形图像裁剪”>
<img class=“team member photo”src=“bw.jpg”onmouseover=“this.src='color.jpg'”onmouseout=“this.src='bw.jpg'”“>
</DIV>
简·贾姆
<br>
<span class=“bio”>领导早期平板电脑、UMPC和手机原型的设计和开发,并帮助当前iPhone应用程序的初步设计。</span>
</DIV>
</li>
<li>
<div class=“团队成员列表包装器”>
<DIV class=“圆形图像裁剪”>
<img class=“team member photo”src=“bw.jpg”onmouseover=“this.src='color.jpg'”onmouseout=“this.src='bw.jpg'”“>
</DIV>
简·贾姆
<br>
<span class=“bio”>领导早期平板电脑、UMPC和手机原型的设计和开发,并帮助当前iPhone应用程序的初步设计。</span>
</DIV>
</li>
<li>
<div class=“团队成员列表包装器”>
<DIV class=“圆形图像裁剪”>
<img class=“team member photo”src=“bw.jpg”onmouseover=“this.src='color.jpg'”onmouseout=“this.src='bw.jpg'”“>
</DIV>
简·贾姆
<br>
<span class=“bio”>领导早期平板电脑、UMPC和手机原型的设计和开发,并帮助当前iPhone应用程序的初步设计。</span>
</DIV>
</li>
<li>
<div class=“团队成员列表包装器”>
<DIV class=“圆形图像裁剪”>
<img class=“team member photo”src=“bw.jpg”onmouseover=“this.src='color.jpg'”onmouseout=“this.src='bw.jpg'”“>
</DIV>
简·贾姆
<br>
<span class=“bio”>领导早期平板电脑、UMPC和手机原型的设计和开发,并帮助当前iPhone应用程序的初步设计。</span>
</DIV>
</li>
<li>
<div class=“团队成员列表包装器”>
<DIV class=“圆形图像裁剪”>
<img class=“team member photo”src=“bw.jpg”onmouseover=“this.src='color.jpg'”onmouseout=“this.src='bw.jpg'”“>
</DIV>
简·贾姆
<br>
<span class=“bio”>领导早期平板电脑、UMPC和手机原型的设计和开发,并帮助当前iPhone应用程序的初步设计。</span>
</DIV>
</li>
<li>
<div class=“团队成员列表包装器”>
<DIV class=“圆形图像裁剪”>
<img class=“team member photo”src=“bw.jpg”onmouseover=“this.src='color.jpg'”onmouseout=“this.src='bw.jpg'”“>
</DIV>
简·贾姆
<br>
<span class=“bio”>领导早期平板电脑、UMPC和手机原型的设计和开发,并帮助当前iPhone应用程序的初步设计。</span>
</DIV>
</li>
<li>
<div class=“团队成员列表包装器”>
<DIV class=“圆形图像裁剪”>
<img class=“team member photo”src=“bw.jpg”onmouseover=“this.src='color.jpg'”onmouseout=“this.src='bw.jpg'”“>
</DIV>
简·贾姆
<br>
<span class=“bio”>领导早期平板电脑、UMPC和手机原型的设计和开发,并帮助当前iPhone应用程序的初步设计。</span>
</DIV>
</li>
<li>
<div class=“团队成员列表包装器”>
<DIV class=“圆形图像裁剪”>
<img class=“team member photo”src=“bw.jpg”onmouseover=“this.src='color.jpg'”onmouseout=“this.src='bw.jpg'”“>
</DIV>
简·贾姆
<br>
<span class=“bio”>领导早期平板电脑、UMPC和手机原型的设计和开发,并帮助当前iPhone应用程序的初步设计。</span>
</DIV>
</li>
<li>
<div class=“团队成员列表包装器”>
<DIV class=“圆形图像裁剪”>
<img class=“team member photo”src=“bw.jpg”onmouseover=“this.src='color.jpg'”onmouseout=“this.src='bw.jpg'”“>
</DIV>
简·贾姆
<br>
<span class=“bio”>领导早期平板电脑、UMPC和手机原型的设计和开发,并帮助当前iPhone应用程序的初步设计。</span>
</DIV>
</li>
<li>
<div class=“团队成员列表包装器”>
<DIV class=“圆形图像裁剪”>
<img class=“team member photo”src=“bw.jpg”onmouseover=“this.src='color.jpg'”onmouseout=“this.src='bw.jpg'”“>
</DIV>
简·贾姆
<br>
<span class=“bio”>领导早期平板电脑、UMPC和手机原型的设计和开发,并帮助当前iPhone应用程序的初步设计。</span>
</DIV>
</li>
<li>
<div class=“团队成员列表包装器”>
<img class=“team member photo”src=“bw.jpg”onmouseover=“this.src='color.jpg'”onmouseout=“this.src='bw.jpg'”“>
<span class=“team member name”>简·卡姆</span>
</DIV>
</li>
</ul>

</DIV>
</section>

    CSS:。
    

团队{
边距:自动;
溢出:隐藏;
背景:fefefe;
显示:内联块;
}

.团队列表{
职位:相对;
上边距:40px;
右边距:自动;
左边距:自动;
}

.团队列表li{
显示:内联块;
宽度:30%;
溢出:隐藏;
浮动:左;
高度:320px;
列表样式位置:内部;
右边距:5px;
背景色:
}

.生物{
显示:内联块;
文本对齐:左对齐;
颜色:111;
字体大小:1REM;
线高:1;
可见性:隐藏;
}

.team成员列表包装器{
文本对齐:居中;
垂直对齐:顶部;
宽度:100%;
高度:100%;
边距:0自动;
显示:内联块;
}

.team成员列表包装器强{
字体大小:1.125rem;
线高:1;
}

.团队列表{
显示:表格;
列表样式:无;
盒影:0 0.9375rem 3.75rem rgba(2,2,22,0.1);
空白:nowrap;
宽度:80%;
边距:自动;
}

.圆形图像裁剪{
宽度:180px;
高度:180px;
职位:相对;
溢出:隐藏;
边界半径:50%;
左边距:自动;
右边距:自动;
上边距:20px;
}

.圆形图像裁剪:悬停{
高度:100%;
宽度:自动;
边界半径:0%;
}

.圆形图像裁剪img{
显示:内联;
边距:0自动;
高度:100%;
宽度:自动;
}

    


    我在我的ul元素,如上面的示例所示。我不能在li元素也是一样的-我将右边距设置为5像素,但它仍然以白色为边界。如何使页边距(或li元素之间的空格)仅填充DIV(或保险商实验室在这种情况下)?
    


    enter image description here
    


    J这里的小提琴:http://jsfiddle.net/mzechar/gyo6t25e/10/
    


    HTML:
    


           <section class = "content-wrapper team">
   <h3>Columbia</h3>
   <div class = "team-listing">
       <ul>
           <li>
               <div class = "team-member-listing-wrapper">
                       <div class = "circle-image-crop">
                           <img class = "team-member-photo" src="BW.jpg" onmouseover="this.src='COLOR.jpg'" onmouseout="this.src='BW.jpg'"">
                       </div>
                   Jane Jam
                   <br>
                   <span class = "bio">lead the design and development of early tablet PC, UMPC, and mobile phone prototypes and helped with the initial design of the current iPhone app.</span>
               </div>
           </li>
           <li>
               <div class = "team-member-listing-wrapper">
                       <div class = "circle-image-crop">
                           <img class = "team-member-photo" src="BW.jpg" onmouseover="this.src='COLOR.jpg'" onmouseout="this.src='BW.jpg'"">
                       </div>
                   Jane Jam
                   <br>
                   <span class = "bio">lead the design and development of early tablet PC, UMPC, and mobile phone prototypes and helped with the initial design of the current iPhone app.</span>
               </div>
           </li>
           <li>
               <div class = "team-member-listing-wrapper">
                       <div class = "circle-image-crop">
                           <img class = "team-member-photo" src="BW.jpg" onmouseover="this.src='COLOR.jpg'" onmouseout="this.src='BW.jpg'"">
                       </div>
                   Jane Jam
                   <br>
                   <span class = "bio">lead the design and development of early tablet PC, UMPC, and mobile phone prototypes and helped with the initial design of the current iPhone app.</span>
               </div>
           </li>
           <li>
               <div class = "team-member-listing-wrapper">
                       <div class = "circle-image-crop">
                           <img class = "team-member-photo" src="BW.jpg" onmouseover="this.src='COLOR.jpg'" onmouseout="this.src='BW.jpg'"">
                       </div>
                   Jane Jam
                   <br>
                   <span class = "bio">lead the design and development of early tablet PC, UMPC, and mobile phone prototypes and helped with the initial design of the current iPhone app.</span>
               </div>
           </li>
           <li>
               <div class = "team-member-listing-wrapper">
                       <div class = "circle-image-crop">
                           <img class = "team-member-photo" src="BW.jpg" onmouseover="this.src='COLOR.jpg'" onmouseout="this.src='BW.jpg'"">
                       </div>
                   Jane Jam
                   <br>
                   <span class = "bio">lead the design and development of early tablet PC, UMPC, and mobile phone prototypes and helped with the initial design of the current iPhone app.</span>
               </div>
           </li>
           <li>
               <div class = "team-member-listing-wrapper">
                       <div class = "circle-image-crop">
                           <img class = "team-member-photo" src="BW.jpg" onmouseover="this.src='COLOR.jpg'" onmouseout="this.src='BW.jpg'"">
                       </div>
                   Jane Jam
                   <br>
                   <span class = "bio">lead the design and development of early tablet PC, UMPC, and mobile phone prototypes and helped with the initial design of the current iPhone app.</span>
               </div>
           </li>
           <li>
               <div class = "team-member-listing-wrapper">
                       <div class = "circle-image-crop">
                           <img class = "team-member-photo" src="BW.jpg" onmouseover="this.src='COLOR.jpg'" onmouseout="this.src='BW.jpg'"">
                       </div>
                   Jane Jam
                   <br>
                   <span class = "bio">lead the design and development of early tablet PC, UMPC, and mobile phone prototypes and helped with the initial design of the current iPhone app.</span>
               </div>
           </li>
           <li>
               <div class = "team-member-listing-wrapper">
                       <div class = "circle-image-crop">
                           <img class = "team-member-photo" src="BW.jpg" onmouseover="this.src='COLOR.jpg'" onmouseout="this.src='BW.jpg'"">
                       </div>
                   Jane Jam
                   <br>
                   <span class = "bio">lead the design and development of early tablet PC, UMPC, and mobile phone prototypes and helped with the initial design of the current iPhone app.</span>
               </div>
           </li>
           <li>
               <div class = "team-member-listing-wrapper">
                       <div class = "circle-image-crop">
                           <img class = "team-member-photo" src="BW.jpg" onmouseover="this.src='COLOR.jpg'" onmouseout="this.src='BW.jpg'"">
                       </div>
                   Jane Jam
                   <br>
                   <span class = "bio">lead the design and development of early tablet PC, UMPC, and mobile phone prototypes and helped with the initial design of the current iPhone app.</span>
               </div>
           </li>
           <li>
               <div class = "team-member-listing-wrapper">
                       <div class = "circle-image-crop">
                           <img class = "team-member-photo" src="BW.jpg" onmouseover="this.src='COLOR.jpg'" onmouseout="this.src='BW.jpg'"">
                       </div>
                   Jane Jam
                   <br>
                   <span class = "bio">lead the design and development of early tablet PC, UMPC, and mobile phone prototypes and helped with the initial design of the current iPhone app.</span>
               </div>
           </li>
           <li>
               <div class = "team-member-listing-wrapper">
                   <img class = "team-member-photo" src="BW.jpg" onmouseover="this.src='COLOR.jpg'" onmouseout="this.src='BW.jpg'"">
                   <span class = "team-member-name">Jane Jam</span>
               </div>
           </li>
       </ul>

   </div>
   </section>

    


    CSS(中文):
    


    section.team{
    margin: auto;
    overflow: hidden;
    background: #FEFEFE;
    display:inline-block;
}

.team-listing{
    position:relative;
    margin-top:40px;
    margin-right:auto;
    margin-left:auto;
}

.team-listing li{
    display:inline-block;
    width: 30%;
    overflow: hidden;
    float:left;
    height: 320px;
    list-style-position:inside;
    margin-right:5px;
    background-color:#FEFEFE;
}

.bio{
    display: inline-block;
    text-align:left;
    color: #111;
    font-size: 1rem;
    line-height: 1;
    visibility:hidden;
}

.team-member-listing-wrapper{
    text-align: center;
    vertical-align: top;
    width:100%;
    height:100%;
    margin: 0 auto;
    display:inline-block;
}

.team-member-listing-wrapper strong{
    font-size: 1.125rem;
    line-height: 1;
}

.team-listing ul{
    display:table;
    list-style: none;
    box-shadow:0 0.9375rem 3.75rem rgba(2,2,22,0.1);
    white-space: nowrap;
    width:80%;
    margin:auto;
}

.circle-image-crop{
    width: 180px;
    height: 180px;
    position: relative;
    overflow: hidden;
    border-radius: 50%;
    margin-left:auto;
    margin-right:auto;
    margin-top:20px;
}

.circle-image-crop:hover{
    height:100%;
    width:auto;
    border-radius:0%;
}

.circle-image-crop img{
    display: inline;
    margin: 0 auto;
    height: 100%;
    width: auto;
}
    1 回复  |  直到 6 年前
        1
  •  1
  •   Advena Scimonster    6 年前

    你必须使用 filter: drop-shadow(5px 5px 5px #222); 在这种情况下,作为 <ul> . 方框阴影只在DIV的周围,不填充DIV的内部。

    Box-shadow vs Drop shadow

    推荐文章
    user9085934  ·  居中列表元素
    6 年前
    Raymond N.  ·  仅当屏幕宽度>761px时,如何将响应导航栏扩展到100%宽度
    7 年前
    sdvnksv  ·  将列表项按50%的移位放在两行中
    7 年前
    Donald Roos  ·  显示列表项的随机选择并随机移动
    7 年前
    ET-CS  ·  CSS-HTML列表-在页面中居中,左对齐LI项
    7 年前
    BobbyJones  ·  如何动态添加新选项卡?
    7 年前
    CSRenA  ·  如何使JavaScript创建的列表项可单击?
    7 年前
    alexpopa  ·  css对齐元素,使它们之间具有相同的空间[重复]
    7 年前
    David Gomes  ·  使用自定义CSS内容处理列表项内的段落
    7 年前
    Edon  ·  角度2中带有箭头键的html列表项选择
    7 年前
    关于   移动版
    代码之家 - 一站式码农服务社区
    沪ICP备11025650号