CSS float 属性仅适用于额外的样式标签

标签 css css-float

我想我对 HTML css 有一些不了解的地方。当我使用这段代码时:

<!DOCTYPE html>
<html>
<head>
<title>STC </title>
<link href="bootstrap.css" rel="stylesheet">
<script src="bootstrap.js"></script>

<style type="text/css">
...
.loginHeader{
    float: right;
    padding: 5px;
}
.navLinks{
    float: left;
    padding: 5px;
}
</style>
</head>
<body>
<div class="topBar">
<div class="navLinks">
<a href=""> Home</a> | <a href=""> About</a> | <a href=""> Suggestions</a> | <a href=""> Terms & Conditions</a>
</div>
<div class="loginheader">
        croberts | <a href="/myContracts/">My Contracts</a> | <a href='?logout'>Logout </a>

</div>
</div>
...
</body>
</html>

我的 float 权利没有按照我想要的方式工作。但是,如果在我的文件的最开头,在 doctype 声明之前,我添加 <style></style>然后它完美地工作。那么,为什么类似的东西会对那种特定的风格产生影响呢?其他一切看起来都应该如此,这只是右浮动问题。

最佳答案

查看 .loginheader{} 的“H”,在您的 css 中您有“H”,在 HTML 中您有“h”

更正>> http://jsfiddle.net/4eDAm/

关于CSS float 属性仅适用于额外的样式标签,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15296904/

相关文章:

javascript - 传单 map : Animate rectangle to fade out after a 3 seconds

html - div 什么时候填充水平空间,什么时候不填充?

html - CSS/HTML float div 继承父级的宽度而不响应定义的宽度,怎么了?

php - 用于背景图像的 WordPress 定制器 CSS

html - 现代浏览器的安全字体列表

css - 使用 flexbox 水平居中行中的文本,两侧都有 float ?

jquery - li 的宽度在 IE 中有两个不同的 float ,在 FF 中正确

css - 设置彼此相邻的div

html - 将元素定位到 block 元素的右侧