CSS 继承和 float:left 问题

Question

我是 CSS 的新手，根据我的以下代码有几个问题：

1) 为什么我说宽度= 100% 时，底边和背景颜色会被切断？

2) 为什么第一个无序列表中的第二个无序列表（with class "dropdown"）不继承父无序列表（with class "tabs")?

3) 为什么第一个无序列表（带class "tabs"）在浏览器中运行时没有水平显示？我试过使用 'float: left' 和 'display: inline' 行，但两者都不起作用，一起使用或单独使用

HTML:

<!DOCTYPE html>
<html>
    <head>
        <title> Random Web Page </title>
        <link rel="stylesheet" type="text/css" href="basic styles test.cpp">
    </head>
    <body>
        <div class="navbar">
            <ul class="tabs">
                <li>Pancakes</li>
                <li>Waffles</li>
                <li>Bacon</li>
                <li>Drinks
                    <ul class="dropdown">
                        <li>Orange Juice</li>
                        <li>Milk</li>
                        <li>Water</li>
                    </ul>
                </li>
            </ul>
        </div>
    </body>
</html>

CSS:

.navbar {
    position: absolute;
    top: 0; 
    left = 0; 
    width = 100%; 
    background: red;
    border-bottom: 5px solid #ccc;
    overflow: hidden;
}
.tabs { 
    list-style: none;
    float: left;
}
 .dropdown {

}

Answer 1

你的语法是错误的，它是 width:100%，不是 width = 100% :) 和 left = 0 一样在 CSS.

attr:value

第二个 ul 没有样式因为你只在 class .tabs 上使用了 list-style:none 如果您想以这种方式设置所有 ul 的样式，那么您应该使用

ul {list-style:none}
或
.tabs, .dropdown {list-style:none}
如果你想要第一个 ul 水平你应该在子元素 .tabs>li {float:left}
上使用 float:left .tabs>li 意味着你 select 仅直接 li-来自 .tabs-class 元素的元素

CSS 继承和 float:left 问题

CSS Inheritance and float:left issues

html

css

css-float