CSS- Float 无法正常工作
CSS- Float not working as it's supposed to
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..
如果没问题你可以这样用..
<div class="fixedwidth">
<div id="rss">
RSS
</div>
<p id="newsheader">NEWS <span id="uk">UK</span>
</p>
</div>
只需在#newsheader 内容之上使用#rss 内容
.
抱歉之前的回答!
实际上,您在样式 sheet 中缺少“#”。
应该是
#rss {
float: right;
}
那里只有 rss。只需在 RSS 前添加“#”即可。那么它将起作用
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..
如果没问题你可以这样用..
<div class="fixedwidth">
<div id="rss">
RSS
</div>
<p id="newsheader">NEWS <span id="uk">UK</span>
</p>
</div>
只需在#newsheader 内容之上使用#rss 内容 .
抱歉之前的回答! 实际上,您在样式 sheet 中缺少“#”。 应该是
#rss {
float: right;
}
那里只有 rss。只需在 RSS 前添加“#”即可。那么它将起作用