CSS 'float:右；‘问题
CSS 'float:右；‘问题
提问于 2012-05-25 17:57:16
我目前有一个简单的头部设置在HTML中，并且正在使用CSS进行样式设置。我已经创建了多个样式：“#header”和“#header#right”。对于我提到的第二种样式，当我使用“float:right；”时，它几乎将文本完全下移到标题下面。
代码：
index.html：
<html>
<link rel="icon" type="image/png" href="images/favicon.png">
<link href='main.css' type='text/css' rel=Stylesheet>
<head>
<title>FriendSub</title>
</head>
<body>
<div id='header'>
<font size='+3'>FriendSub </font>
<a href='index.php'>Home</a> |
<a href=''>Subscribers</a> |
<a href=''>Subscriptions</a>
<div id='right'>
<p><a href=''>Log in</a> | <a href='register.php'>Register</a></p></div></div>
</body>
</html>main.css：
@charset "utf-8";
/* CSS Document */
#header {
font-family: Arial, Helvetica, sans-serif;
font-size: 24px;
background-color: #093;
border-top-left-radius: 18;
border-top-right-radius: 18;
width: 96%;
height: 58px;
margin: auto;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 14px;
padding-right: 14px;
color: #FFF;
font-weight: bold;
text-shadow: #000 0.1em 0.1em 0.2em;
}
#header a {
color: #FFF;
text-decoration: none;
text-shadow: #000 0.1em 0.1em 0.2em;
}
#header a:hover {
color: #CCC;
}
#header #right {
float: right;
width: 220px;
background-color: #093;
}
#content {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
background-color: #CCC;
width: 1000;
height: 58px;
margin-left: auto;
margin-right: auto;
padding-top: 14px;
padding-left: 14px;
padding-right: 14px;
padding-bottom: 600;
font-weight: bold;
border-bottom-left-radius: 18;
border-bottom-right-radius: 18;
line-height: 1%;
}JSFiddle这里：http://jsfiddle.net/aKtep/
回答 6
Stack Overflow用户
回答已采纳
发布于 2012-05-25 18:06:24
在关闭<div style='clear:both'></div>之后，尝试添加一个#right，看看会发生什么
Stack Overflow用户
发布于 2012-05-25 18:10:47
一个快速的解决方案(假设我理解您想要的结果)是重新排列元素，因此您想要向右浮动的项是头中的第一个。浮动元素从文档的正常流中移除，并且通常被推送到下一行，除非它们有足够的空间。但是，如果先使用浮动元素，则后续元素将围绕其排列。见小提琴。
Stack Overflow用户
发布于 2012-05-25 18:06:38
从Login/Register周围移除p标记，修改#header #右侧，以包含一个填充-top:10 p；当您不需要使用(divitus)时，您也使用了太多的div。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/10759216
复制相关文章
相似问题
腾讯云开发者
