Question

我目前在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 &nbsp; &nbsp;</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/

Answer 1

尝试在关闭<div style='clear:both'></div>后立即添加#right并查看会发生什么

Answer 2

快速解决方案（假设我理解您想要的结果）是重新排列元素，以便您想要向右浮动的项目是标题中的第一个。浮动元素从文档的正常流中移除，并且通常被推到下一行，除非它们具有足够的空间。但是，如果浮动元素首先出现，后续元素将围绕它自行排列。见fiddle。

Answer 3

从登录/注册链接周围删除p标记，修改#header #right以包含padding-top：10px;当你真的不需要（divitus）

时，你也会使用太多的div

Answer 4

您需要为容器#header指定容纳其所有内容的单位宽度。

我做的所有here的宽度从#header更改为96%

Answer 5

我想我不是百分之百确定你要问的是什么，但听起来你的正常标题是将正确的标题推到它下方。从我所看到的，它可能与您的标题容器有关，宽度为96％。然后#right #header的像素宽度和原始标题容器可能没有足够的空间用于那么多像素。尝试将#header #right的宽度更改为％

建议，不要使用ID这么多。你正在创造非常高的特异性，这对你以后会很痛苦。

Answer 6

如前所述，您应该在 #right 细分后使用clear: float。

原因是the clear property与the float property直接相关。 它指定元素是否应位于浮动元素的旁边，或者是否应移动到它们下方。此属性适用于浮动和非浮动元素。

CSS'float：right;'问题

6 个答案: