在 div 内的 div 上使用 "overflow:hidden;"

Question

我有一组 6 个 div 嵌套在另一个 div 中。我为父级设置了边框半径，在嵌套的 div 上没有边框半径。它们的组合宽度恰好是父级内部区域的宽度div。它们都向左浮动。在此设置中，子项的角溢出父项的圆角。将溢出设置为隐藏似乎什么都不做。

有谁知道如何隐藏那些从父级溢出的角落？

我正在使用附加代码中没有的 css 重置。该特定文件可在此处获得：reset.css

还有一个 link 到这个页面（这样你就明白我的意思了）

79.170.44.85/rasmussenprojects.com/home.html

编辑：这是 firefox 显示的屏幕截图，以防它无法为您正确显示：

i.stack.imgur.com/OHkng.png

<!doctype html>
<html>
    <head>
        <title>Home</title>
        <meta charset="utf-8" />
        <meta http-equiv="Content-type" content="text/html; charset=utf-8"/> 
        <meta name="viewport" content="width=device-width, initial-scale=1"/>
        <link rel="stylesheet" type="text/css" href="reset.css">
        <!--
            <link rel="stylesheet" type="text/css" href="home.css">
        -->
        <style>
            html, body{
                    background-color:rgb(32,32,32);
                    width:1366px;
                    height:637px;
                    position:relative;
                    }
                #banner_logotext{
                    color:rgb(16,16,16);
                    width:1074px;
                    text-align:center;
                    font-size:32px;
                    font-weight:700;
                    font-family:Arial, Helvetica, sans-serif;
                    }
                #banner_slogantext{
                    color:rgb(16,16,16);
                    width:1074px;
                    text-align:center;
                    font-size:12px;
                    line-height:6px;
                    margin-top:8px;
                }
                .content-panel{
                    background-color:rgb(64,64,64);
                    margin:0 auto;
                    border: 2px solid rgb(16,16,16);
                    border-radius:16px;
                    }
                #banner{
                    width:1074px;
                    height:90px;
                    padding-top:8px;
                    }
                #navbar{
                    width:1074px;
                    height:45px;
                    }
                .navbar-tab{
                    width:178.333333333px;
                    height:41px;
                    float: left;
                    background-color:rgb(48,48,48); 
                    border: 2px solid black;
                }
        </style>

    </head>

    <body>
        <div class="content-panel" id="banner">
            <p  id="banner_logotext">
                Lorem ipsum dolor sit amet
            </p>
            <p  id="banner_slogantext">
                "Neque porro quisquam est qui dolorem ipsum 
                <br></br>quia dolor sit amet, consectetur, adipisci velit..."
            </p>
        </div>
        <div class="content-panel" id="navbar">
            <div class="navbar-tab">

            </div>
            <div class="navbar-tab">

            </div>
            <div class="navbar-tab">

            </div>
            <div class="navbar-tab">

            </div>
            <div class="navbar-tab">

            </div>
            <div class="navbar-tab">

            </div>
        </div>
    </body>
</html>

Answer 1

adiing overflow:hidden 处理您的代码

html,
body {
  background-color: rgb(32, 32, 32);
  width: 1366px;
  height: 637px;
  position: relative;
}
#banner_logotext {
  color: rgb(16, 16, 16);
  width: 1074px;
  text-align: center;
  font-size: 32px;
  font-weight: 700;
  font-family: Arial, Helvetica, sans-serif;
}
#banner_slogantext {
  color: rgb(16, 16, 16);
  width: 1074px;
  text-align: center;
  font-size: 12px;
  line-height: 6px;
  margin-top: 8px;
}
.content-panel {
  background-color: rgb(64, 64, 64);
  margin: 0 auto;
  border: 2px solid rgb(16, 16, 16);
  border-radius: 16px;
}
#banner {
  width: 1074px;
  height: 90px;
  padding-top: 8px;
}
#navbar {
  width: 1074px;
  height: 45px;
  overflow: hidden;
}
.navbar-tab {
  width: 178.333333333px;
  height: 41px;
  float: left;
  background-color: rgb(48, 48, 48);
  border: 2px solid black;
}

<div class="content-panel" id="banner">
  <p id="banner_logotext">Lorem ipsum dolor sit amet</p>
  <p id="banner_slogantext">"Neque porro quisquam est qui dolorem ipsum
    <br></br>quia dolor sit amet, consectetur, adipisci velit..."</p>
</div>
<div class="content-panel" id="navbar">
  <div class="navbar-tab"></div>
  <div class="navbar-tab"></div>
  <div class="navbar-tab"></div>
  <div class="navbar-tab"></div>
  <div class="navbar-tab"></div>
  <div class="navbar-tab"></div>
</div>

Answer 2

当您设置 overflow:hidden 时，您是在告诉一个元素隐藏任何溢出其边界的子元素。因此，在您的场景中，您必须为 #navbar 而不是每个 .navbar-tab.

设置它

#navbar{ overflow:hidden; }

正如 Justin Breiland 所提到的，您还可以将第一个和最后一个 .navbar-tab 的一些角弄圆，以便更好地呈现。

.navbar-tab:first-child { border-top-left-radius: 13px; border-bottom-left-radius: 13px; }
.navbar-tab:last-child { border-top-right-radius: 13px; border-bottom-right-radius: 13px; }

片段中的完整示例。现场示例：http://codepen.io/anon/pen/wBeKWq

html, body{
  background-color:rgb(32,32,32);
  width:1366px;
  height:637px;
  position:relative;
}
#banner_logotext{
  color:rgb(16,16,16);
  width:1074px;
  text-align:center;
  font-size:32px;
  font-weight:700;
  font-family:Arial, Helvetica, sans-serif;
}
#banner_slogantext{
  color:rgb(16,16,16);
  width:1074px;
  text-align:center;
  font-size:12px;
  line-height:6px;
  margin-top:8px;
}
.content-panel{
  background-color:rgb(64,64,64);
  margin:0 auto;
  border: 2px solid rgb(16,16,16);
  border-radius:16px;
}
#banner{
  width:1074px;
  height:90px;
  padding-top:8px;
}
#navbar{
  width:1074px;
  height:45px;
  overflow:hidden;
}
.navbar-tab{
  width:175px;
  height:41px;
  float: left;
  background-color:rgb(48,48,48); 
  border: 2px solid black;
}
.navbar-tab:first-child{
  border-top-left-radius: 13px;
  border-bottom-left-radius: 13px;
}
.navbar-tab:last-child{
  border-top-right-radius: 13px;
  border-bottom-right-radius: 13px;
}

<div class="content-panel" id="banner">
  <p  id="banner_logotext">
    Lorem ipsum dolor sit amet
  </p>
  <p  id="banner_slogantext">
    "Neque porro quisquam est qui dolorem ipsum 
    <br></br>quia dolor sit amet, consectetur, adipisci velit..."
</p>
</div>
<div class="content-panel" id="navbar">
  <div class="navbar-tab">

  </div>
  <div class="navbar-tab">

  </div>
  <div class="navbar-tab">

  </div>
  <div class="navbar-tab">

  </div>
  <div class="navbar-tab">

  </div>
  <div class="navbar-tab">

  </div>
</div>

在 div 内的 div 上使用 "overflow:hidden;"

Using "overflow:hidden;" on a div inside a div

html

css

overflow