CSS-浮动无法正常工作[关闭]答案

【问题标题】：CSS- Float not working as it's supposed to [closed]CSS-浮动无法正常工作[关闭]
【发布时间】：2015-01-21 00:34:05
【问题描述】：

 body {
   margin: 0;
   font-family: arial;
   line-height: 16px;
 }
 #topbar {
   background-color: #600c0c;
   width: 100%;
   height: 46px;
   color: white;
   margin: 0;
 }
 .fixedwidth {
   width: 1050px;
   margin: 0 auto;
 }
 #logodiv {
   padding-top: 5px;
   float: left;
   border-right: 1px solid #b20505;
   padding-right: 10px;
   padding-bottom: 4px;
 }
 #signindiv {
   font-weight: bold;
   font-size: 0.9em;
   border-right: 1px solid #b20505;
   padding: 1px 80px 0px 12px;
   float: left;
 }
 #topmenudiv {
   float: left;
 }
 #topmenudiv ul {
   padding: 0;
   margin: 0px;
 }
 #topmenudiv li {
   list-style: none;
   font-weight: bold;
   font-size: 0.9em;
   border-right: 1px solid #b20505;
   height: 100%;
   padding: 15px 20px 15px 20px;
   float: left;
 }
 #searchdiv {
   float: left;
   padding: 5px 0 0 10px;
 }
 #searchdiv input {
   height: 25px;
   border: none;
   font-size: 0.9em;
   padding-left: 10px;
   background-image: url(images/Search.png);
   background-repeat: no-repeat;
   background-position: right center;
 }
 .break {
   clear: both;
 }
 #newsbar {
   background-color: #b20505;
   width: 100%;
   height: 80px;
   color: white;
   margin: 0;
 }
 #newsbar p {
   margin: 0;
   padding: 0;
   padding-top: 30px;
   padding-left: 0px;
   float: left;
 }
 #newsheader {
   font-size: 3em;
 }
 #uk {
   font-size: 0.7em;
   padding-left: 8px;
 }
 rss {
   float: right;
 }

<!doctype html>
<html>

<head>
  <title>My BBC</title>
  <meta charset="utf-8" />
  <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
</head>

<body>
  <div id="container">
    <div id="topbar">
      <div class="fixedwidth">
        <div id="logodiv">
          <img src="images/BBCLogo.png" />
        </div>
        <div id="signindiv">
          <p>Sign In</p>
        </div>
        <div id="topmenudiv">
          <ul>
            <li>News</li>
            <li>Sport</li>
            <li>Weather</li>
            <li>iPlayer</li>
            <li>TV</li>
            <li>Radio</li>
            <li>More...</li>
          </ul>
        </div>
        <div id="searchdiv">
          <input type="text" placeholder="Search" />
        </div>
      </div>
    </div>
    <div class="break"></div>
    <div id="newsbar">
      <div class="fixedwidth">
        <p id="newsheader">NEWS <span id="uk">UK</span>
        </p>
        <div id="rss">
          RSS
        </div>
      </div>
    </div>
  </div>
</body>

</html>

我正在尝试模拟BBC 新闻网站，我的问题是“RSS”这个词应该是向右浮动的，但尽管我已经为整个容器 div 分配了宽度，但它并没有。我不明白。 Here is how it looks..

【问题讨论】：

您的 CSS 规则是 rss {...，它应该是 #rss {...。由于拼写错误，投票结束。
为什么我觉得自己很蠢？！ -_-*

标签： html css css-float

【解决方案1】：

抱歉之前的回答！实际上，您在样式表中缺少“#”。应该是

  #rss {
   float: right;
 }

那里只有 rss 。只需在 RSS 前添加“#”即可。然后它会工作

【讨论】：

我已经在评论中注意到了这一点。请不要尝试从错误是由于拼写错误引起的问题中获得代表，因为它没有价值。相反，投票将其关闭为离题。

【解决方案2】：

如果没问题，你可以这样使用..

<div class="fixedwidth">
      <div id="rss">
          RSS
        </div>
        <p id="newsheader">NEWS <span id="uk">UK</span>
        </p>

      </div>

只需在#newsheader 内容上方使用#rss 内容 .

【讨论】：

Opps 的答案是 RSS 在左侧浮动..