CSS：爲什麼從父塊中刪除後代元素？

在我的代碼如下，「問題內容」div的下邊框不出現在底部;它實際上切入了「李」元素。在Firebug中分析這個表明，li class =「tag」後代元素不再包含在「問題內容」父塊中。CSS：爲什麼從父塊中刪除後代元素？

我該如何解決這個問題？謝謝。

<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>

來源

2010-09-13 JMan

我通常（在你的情況ul.links）與display:inline-block屬性聲明子元素解決這個問題。它會阻止孩子跨越父容器的邊界。

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

來源

2010-09-13 22:05:39

嘗試增加overflow: auto到。提問內容

來源

2010-09-13 22:05:08

發生這種情況，因爲你<li>列表項浮動。

嘗試在關閉</ul>後添加clear:both樣式的塊級元素。

所以：

<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>

來源

2010-09-13 22:07:44 Gus

您已經指定了與類「tag」任何事情都會有「float: left」。

Float從文檔的常規流佈局中移除元素。換句話說，包含的<ul>和<div>塊不再根據列表中的<li>的高度進行調整。

如果您希望列表項目出現在其容器中，而不是浮動到文檔其餘部分的左側，則需要刪除浮動元素。或者，你可以浮動整個事情，通過將浮動屬性放在包含div。

來源

2010-09-13 22:08:08 womp

CSS：爲什麼從父塊中刪除後代元素？

回答

相關問題