Question

我刚开始玩HTML / CSS而且我已经卡住了。

我试图谷歌我的问题，但我想我错过了一些关键字来找到解决方案。为什么<div id="NavContent>内没有链接和文字？

＆＃13;

body {
    margin:0;
    background-color: #ffffff;
}

nav {
    background-color: #2a9dfc;
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 13px;
    padding-bottom: 13px;
}

#NavContent {
    border: 2px solid black;
    max-width: 900px;
    width: 100%;
    margin: 0 auto;
}

#Link {
    float:left;
}

#Text {
    float:right;
}

＆＃13;

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>scrare</title>
    <link rel="stylesheet" href="stylesheet.css">
</head>

<body>
    <nav>
        <div id="NavContent">
            <a id="Link" href="/">Link</a>
            <div id="Text">Text</div>
        </div>
    </nav>
</body>
</html>

＆＃13;

Answer 1

一旦将div中的元素设置为float，它们就会失去对父元素的height属性的影响。

那就是说，你可以：

设置div的高度;或
在<div>之后添加空<div id="text">但不在style='clear: both;'

Answer 2

轻松修复是将overflow: hidden;添加到#NavContent。

或者您可以添加clearfix解决方案 -

#NavContent:after {
  content: "";
  display: block;
  clear: both;
}

body {
margin:0;
background-color: #ffffff;
}

nav {
background-color: #2a9dfc;
padding-left: 20px;
padding-right: 20px;
padding-top: 13px;
padding-bottom: 13px;
}

#NavContent {
border: 2px solid black;
max-width: 900px;
width: 100%;
margin: 0 auto;
}

#Link {
float:left;
}

#Text {
float:right;
}
#NavContent:after {
  content: "";
  display: block;
  clear: both;
}

<nav>
	<div id="NavContent">
		<a id="Link" href="/">Link
		</a>
		<div id="Text">
					Text
		</div>
	</div>
</nav>

<main>
</main>

<footer>
</footer>

Answer 3

解决问题的方法很少。

为#NavContent元素添加合适的高度（如height:200px）

或
将#NavContent的溢出属性设置为auto

为什么不是div里面的文字？

3 个答案: