Question

在css文件中写入包含html和css的代码：common.css，我编写

mxnet

并在html文件中写：

.r {
   float:right;  
}

，但此div仍在左侧，代码如下： common.css

<div class="menu r">

</div>

在html文件中，代码：

/*header start*/
.headerbg {
    width:100%;
    height:100px;
    background-color: #fdfdfd;
}
.header {
    width:1200px;
}
.logo {
    display:block;
}
.f {
    float：left;
}
.menu {
    width:570px;
    height:50px;
    background-color: skyblue;
}
.r {
    float：right;
}
/*header end*/

但是div class =“ menu r”仍在左侧，在Chrome中，按F12键，找到：

<div class="headerbg">
    <div class="header">
        <a href="#" class="logo f">
            <img src="images/logo.gif" width="305" height="70" alt="...">
        </a>
        <div class="menu r">

        </div>
    </div>
</div>

没有内容：浮动：正确，您能告诉我为什么以及如何更正

Answer 1

console.log('float:right' === 'float:right')===>result : false
 your code--------^                 ^----------my code

console.log('float：right' === 'float:right');

console.log('float:right'.charCodeAt(5));-->//65306
console.log('float:right'.charCodeAt(5));--->//58

所以，问题在:（冒号）中。

可以从其他代码复制float:right。为解决该问题，请将其删除，然后复制并粘贴以下代码：

.r { float: right; }

.headerbg {
    width:100%;
    height:100px;
    background-color: #fdfdfd;
}
.header {
    width:1200px;
    background-color: red;
}
.logo {
    display:block;
}
.f {
    float：left;
}
.menu {
    width:870px;
    height:50px;
    background-color: skyblue;
    float：right;
}
.r {
    float: right;
}

<div class="headerbg">
  <div class="header">
    <a href="#" class="logo f">
	  <img src="images/logo.gif" width="305" height="70" alt="...">
	</a>
    <div class="menu r">ss</div>
  </div>
</div>

浮动设置无效

1 个答案: