html - 为什么文本不在 div 中?

标签 html css

我刚开始玩 HTML/CSS,但我已经卡住了。

我试图用谷歌搜索我的问题,但我想我缺少一些关键字来找到解决方案。为什么<div id="NavContent>里面没有链接和文字?

DEMO

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;
}
<!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>

最佳答案

一旦将 div 中的元素设置为 float ,它们就失去了对父元素的高度属性的影响。

也就是说,您可以:

  • 设置div的高度;或
  • 添加一个空的 <div><div id="text"> 之后但不在里面,有style='clear: both;'

关于html - 为什么文本不在 div 中?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31371600/

相关文章:

css - 删除 Google 协作平台小工具 (css) 周围的边框

javascript点击事件问题

html - 无法在列表项标记内扩展跨度的宽度

php - 强制表格显示 5 行(有或没有数据)

jquery - 使用 jQuery 循环遍历 html 表

html - 使用 :before 缩进 Div 中的换行符

javascript - 滚动 jQuery 时导航 anchor 无法正确应用事件类

javascript - 在 JS 中创建没有 Canvas 实例的 CanvasImageData 对象

css - 如何让图片出现在页面的固定位置

CSS 裁剪景观到正方形