rõ ràng: cả hai sẽ không hoạt động

Question

Dưới đây là menu bên trong tiêu đề. Các phần tử ul và li đang trôi nổi và hiện đang trôi nổi bên dưới tiêu đề, mà tôi đã cố gắng ngăn chặn rõ ràng: cả hai. Tuy nhiên, điều đó dường như không hoạt động nên tôi tự hỏi ... điều gì có thể sai?

html:

<header> 
    <ul> 
     <li><a href='#'>Item 1</a></li> 
     <li><a href='#'>Item 2</a></li> 
     <li><a href='#'>Item 3</a></li> 
     <li><a href='#'>Item 4</a></li> 
    </ul> 
    <div class='clear'/> 
</header> 

css:

header { 
    background: #888; 
    height: 20px; 
    padding: 10px; 
} 

ul{ 
    margin: 18px 0; 
    padding: 0; 
    list-style: none; 
} 

ul li{ 
    margin: 0 10px 0 0; 
    padding: 0; 
    display: block; 
    float: left; 
    width: 80px; 
    height: 20px; 
    border: 1px solid #000; 
    background: red; 
} 

ul li a{ 
    display:block; 
    width: 100%; 
    height: 100%; 
    text-decoration: none; 
    float: left; 
    text-align: center; 
    padding-top: 2px; 
} 

ul li a:hover{ 
    color: #fff; 
    background-color: #000; 
}​ 

.clear { 
    clear:both; 
} 

Answer 1

Bạn có thể sử dụng một clearfix:

.clearfix:after { 
    clear:both; 
    content:"."; 
    display:block; 
    height:0; 
    line-height:0; 
    visibility:hidden; 
} 

và áp dụng được cho cả ul và tiêu đề.

Answer 2

Bạn không thể sử dụng /> cho divs. Thay đổi nó từ <div class='clear'/> thành <div class="clear"></div>

Hoặc thử thêm một li khác bên dưới số hiện tại và cho rằng lớp rõ ràng.

<header> 
    <ul> 
     <li><a href='#'>Item 1</a></li> 
     <li><a href='#'>Item 2</a></li> 
     <li><a href='#'>Item 3</a></li> 
     <li><a href='#'>Item 4</a></li> 
     <li class='clear'></li> 
    </ul> 
</header> 

Answer 3

css tốt hơn cho tình hình của bạn sẽ được (Tested trong FF, Chrome, IE6 +)

header { 
    display: block; /* Necessary for older browsers to render this html5 element properly */ 
    background: #888; 
    height: 20px; 
    padding: 10px; 
} 

ul { 
    margin: 18px 0; 
    padding: 0; 
    list-style: none; 
} 

ul li { 
    margin: 0 10px 0 0; /* at least some margin-right is necessary to make inline-block work in IE */ 
    padding: 0 5px; /* you don't have to set a width any longer, so let padding define spacing */ 
    display: inline-block; 
    zoom: 1; /* part 1 of the IE hack to make inline-block work */ 
    *display: inline; /* part 2 of the IE hack to make inline-block work */ 
    /* height and line-height not necessary - driven by a element below */ 
    border: 1px solid #000; 
    background: red; 
} 

ul li a { 
    display:block; 
    height: 20px; 
    line-height: 20px; /* this will vertically center the text in the li */ 
    text-decoration: none; 
    text-align: center; 
} 

ul li a:hover{ 
    color: #fff; 
    background-color: #000; 
}​ 

Answer 4

Thay vì sử dụng một cleardiv, có lẽ bạn có thể thử các clearfix tiêu chuẩn từ html5boilerplate?

Dưới đây là đánh dấu chỉnh sửa:

<header class="clearfix"> 
     <ul> 
      <li><a href='#'>Item 1</a></li> 
      <li><a href='#'>Item 2</a></li> 
      <li><a href='#'>Item 3</a></li> 
      <li><a href='#'>Item 4</a></li> 
     </ul> 
    </header> 

và đây là css để thêm:

.clearfix:before, 
.clearfix:after { 
    content: " "; /* 1 */ 
    display: table; /* 2 */ 
} 

.clearfix:after { 
    clear: both; 
} 


.clearfix { 
    *zoom: 1; 
} 

Từ các tài liệu:

.clearfix

Thêm. clearfix đến một phần tử sẽ đảm bảo rằng nó luôn hoàn toàn c ontains trẻ em nổi của nó. Đã có nhiều biến thể của hack clearfix trong những năm qua, và có những hack khác cũng có thể giúp bạn chứa các trẻ em lưu hành, nhưng HTML5 Boilerplate hiện đang sử dụng clearfix vi mô.