Question

我是CSS的新手，根据我的代码提出了一些问题：

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

2）为什么第一个无序列表（带有类＆＃34;下拉＆＃34;）在第一个中没有继承声明为父无序列表的元素（使用类＆＃34; tabs＆＃34;）？< / p>

3）当我在浏览器中运行时，为什么第一个无序列表（带有类＆＃34;标签＆＃34;）不会水平显示？我试过使用＆＃39; float：left＆＃39;和＆＃39;显示：内联＆＃39;线条，但既不工作，一起或分开

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%，而不是宽度= 100％:)同样的东西，左= 0 它总是在CSS中 attr：value 。
第二个ul未设置样式，因为您仅在课程list-style:none上使用了.tabs 如果你想用这种方式设置所有ul的样式，那么你应该使用

ul {list-style:none}
或
.tabs, .dropdown {list-style:none}
如果您希望横向ul水平{@ 1}}，请使用子元素float:left上的.tabs>li {float:left} .tabs>li表示您只选择直接li - 来自.tabs - 类元素的元素

CSS继承和浮动：左侧问题

1 个答案: