Question

我有一组6个div嵌套在另一个div中。我有一个为父级设置的border-radius，并且在嵌套的div上没有边框半径。它们的组合宽度恰好是父div的内部区域的宽度。他们全都飘了。在此设置中，子角落溢出父级的圆角。设置溢出到隐藏似乎什么都不做。

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

我正在使用css重置，这不在附加的代码中。该特定文件可在此处获取：reset.css

此页面的链接（所以你可以看到我的意思）

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

当你设置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>

Answer 2

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>

使用“溢出：隐藏;”在div内的div上

2 个答案: