Question

我正在为我的自动化温室制作一个小网站，但我马上跑到了一个纠结处！我的“＃title-bar”就消失了！如果有人能帮我解决这个问题，我会爱你很久！：P

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>UrbanSector</title>
    <link rel="stylesheet" type="text/css" href="css/custom.css">
    <link rel="stylesheet" type="text/css" href="css/font-awesome-4.2.0/css/font-awesome.min.css">  
    <script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
    <script type="text/javascript" src="js/custom.js"></script>

</head>
<body>
    <div id="container">
        <div id="title-bar">
            <i id="title-bar-logo" class="fa fa-leaf fa-2x fa-inverse"></i>
            <h3>UrbanSector</h3>
            <ul>
                <li><i class="fa fa-home fa-inverse"></i><a href="index.html">Home</a></li>
                <li><i class="fa fa-gear fa-inverse"></i><a href="">Notifications</a></li>
            </ul>
        </div>

        <nav>
            <div id="nav-btn-area">

            </div>
            <ul>
                <li>stuff</li>
                <li>stuff</li>
                <li>stuff</li>
            </ul>
        </nav>
    </div>

</body>
</html>




* {
/* border: limegreen 1px solid; */
padding: 0px;
margin: 0px;
}

body {
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif
}

#container {
width: 100%;
background-color: #E2E2E2;
display: block;
}

#title-bar {
padding: 2px;
background-color: #363636;
display: inline;
}

#title-bar h3 {
float: left;
margin-left: 5px;
color: #FFFFFF;
}

#title-bar ul {
display: inline;
float: right;
list-style-type: none;
}

#title-bar ul li{
margin-left: 5px;
float: left;
}

#title-bar ul li i{

}

#title-bar-logo {
clear: left;
float: left;
margin: auto;
color: green;
}

nav {
margin-top: 10px;
display: block;
background-color: #363636;
width: 14%;
}

编辑：修复帖子的布局

Answer 1

1）从＃title-bar类和

中删除display: inline;规则

2）给它一个高度..说30px;

#title-bar {
  padding: 2px;
  background-color: #363636;
  height: 30px;
}

<强> FIDDLE

Answer 2

将display: inline更改为{＃1}}＃title; bar` CSS规则。

overflow: hidden

这将清除容器内的浮动并使其获得其内容的高度。

Answer 3

另一种方法是制作display:inline; - ＆gt; display:inline-block;

HTML CSS顶级栏问题

3 个答案: