Home > Developer > JavaScript
After setting the float floating attribute for li, the outer ul cannot be opened ., Floatul
This problem has been encountered several times in the project recently and is caused by floating. Although <div> is used to escape the normal document stream, it is impossible to open the outer ul height.
The following code is used as an example. In fact, there are several solutions. I am not using the simplest method.
<! DOCTYPE html>
<Html>
<Head>
<Meta charset = "UTF-8">
<Title> after setting the float floating attribute for li, the outer ul cannot be opened. </Title>
<Style type = "text/css">
Ul {
Border: 1px solid #000;
Width: 200px;
Height: auto;
Margin-top: 100px;
}
Li {
Float: left;
List-style: none;
Margin-left: 10px;
}
</Style>
<Body>
<Ul>
<Li> Monday </li>
<Li> Tuesday </li>
<Li> Wednesday </li>
<Li> Thursday </li>
<Li> Friday </li>
<Li> Saturday </li>
<Li> Sunday </li>
</Ul>
</Body>
</Html>
The code above shows that the ul border is changed to a line that is not opened ,;
However, the expected effect is as follows :.
If the content in ul is fixed, adding height to ul can solve the problem. However, li is dynamically generated in the project, and the number of likes cannot be determined. Therefore, the height can only be set to auto, at this time, we only need to add floating attributes to the outer ul to solve the problem, but sometimes the layout will be affected and can only be determined based on the situation. In addition, we need to add overflow to ul: auto/hidden can also solve the problem. To be compatible with ie6, add "zoom: 1" or "width: 100%.
Finally, we can summarize the following four methods:
1st Methods: in the html code, add an empty element behind the last li to clear the floating, and the div can be changed to p or another. For example:
2nd Methods: set a fixed height for ul. For example:
3rd Methods: Set the overflow attribute for ul, or overflow: hidden. For example:
4th Methods: Add floating attributes to ul, which can be changed to float: right, but the layout may be affected. For example:
Each person should use different methods. I think the third method is the simplest and will be used later. Haha, this will go home from work ~~
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
