Question

在我的下面的代码中，“question-content”div的底部边框不会出现在底部;它实际上切断了“li”元素。在Firebug中对此进行分析表明，li class =“tag”后代元素不再包含在“question-content”父块中。

我该如何解决这个问题？感谢。

<html>
<head>
   <style type="text/css">
    .question-block {
        margin: 10px 10px 0;
        padding-bottom: 20px;
    }
    .question-block .question-content {
        margin: 0 0 10px 55px;
        padding: 0 0 20px 0;
        width: 545px;
        border-bottom: 1px solid gray;
    }
    .question-content h1 {
        font-size: 20px;
        line-height: 22px;
        margin: 0 0 10px 0px;
    }
    .question-content .question-details {
        margin-left: 30px;
        font-size: 14px;
    }
    .question-content .links {
        margin-left: 30px;
        padding: 0px;
        list-style-type: none;
    }
    .tag {
float: left;
margin: 5px 4px 0;
font-size: 14px;
    }
    .tag a {
    display: block;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
    border: 1px;
border-radius: 4px;
height: 20px;
color: #000;
background: #C5C5C5;
    padding: 3px 0 0 0;
width: 81px;
text-align: center;
    }
   </style>
</head>

<body>
    <div class="question-block">      
        <div class="question-content">
            <h1> Question </h1>
            <div class="question-details"> Question details </div>
            <ul class="links">
                 <li class="tag"><a href="#">tag 1</a></li>
                 <li class="tag"><a href="#">tag 2</a></li>
                 <li class="tag"><a href="#">tag 3</a></li>
            </ul>
       </div>
    </div>
</body>

Answer 1

我通常通过使用ul.links属性声明子元素（在您的情况下为display:inline-block）来解决此问题。它会阻止孩子越过父容器的边界。

http://jsfiddle.net/9sQXk/1/

Answer 2

尝试将overflow: auto添加到.question-content

Answer 3

这种情况正在发生，因为您的<li>列表项已浮动。

尝试在结束clear:both后添加</ul>样式的块级元素。

所以：

<html>
<head>
   <style type="text/css">
    .question-block {
        margin: 10px 10px 0;
        padding-bottom: 20px;
    }
    .question-block .question-content {
        margin: 0 0 10px 55px;
        padding: 0 0 20px 0;
        width: 545px;
        border-bottom: 1px solid gray;
    }
    .question-content h1 {
        font-size: 20px;
        line-height: 22px;
        margin: 0 0 10px 0px;
    }
    .question-content .question-details {
        margin-left: 30px;
        font-size: 14px;
    }
    .question-content .links {
        margin-left: 30px;
        padding: 0px;
        list-style-type: none;
    }
    .tag {
float: left;
margin: 5px 4px 0;
font-size: 14px;
    }
    .tag a {
    display: block;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
    border: 1px;
border-radius: 4px;
height: 20px;
color: #000;
background: #C5C5C5;
    padding: 3px 0 0 0;
width: 81px;
text-align: center;
    }
.clearfloat {
clear: both;
}
   </style>
</head>

<body>
    <div class="question-block">      
        <div class="question-content">
            <h1> Question </h1>
            <div class="question-details"> Question details </div>
            <ul class="links">
                 <li class="tag"><a href="#">tag 1</a></li>
                 <li class="tag"><a href="#">tag 2</a></li>
                 <li class="tag"><a href="#">tag 3</a></li>
            </ul>
            <div class="clearfloat"></div>
       </div>
    </div>
</body>

Answer 4

您已指定类“tag”的任何内容都会包含“float: left”。

Float从文档的常规流布局中删除元素。换句话说，不再根据列表中<ul>的高度调整包含<div>和<li>块的内容。

如果希望列表项显示在其容器内，而不是浮动到文档其余部分的左侧，则需要删除浮动。或者，您可以通过将float属性放在包含div上来浮动整个事物。

CSS：为什么从父块中删除后代元素？

4 个答案: