首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >CSS 'float:右;‘问题

CSS 'float:右;‘问题
EN

Stack Overflow用户
提问于 2012-05-25 17:57:16
回答 6查看 7.5K关注 0票数 1

我目前有一个简单的头部设置在HTML中,并且正在使用CSS进行样式设置。我已经创建了多个样式:“#header”和“#header#right”。对于我提到的第二种样式,当我使用“float:right;”时,它几乎将文本完全下移到标题下面。

代码:

index.html:

代码语言:javascript
运行
复制
<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:

代码语言:javascript
运行
复制
@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/

EN

Stack Overflow用户

发布于 2018-05-18 14:29:38

如前所述,您应该在clear: float #右段之后使用。

原因是明确性质浮子性质直接相关。它指定元素是否应该在浮动元素的旁边,或者是否应该移动到它们下面。这个属性同时适用于浮动和非浮动的元素。

票数 0
EN
查看全部 6 条回答
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/10759216

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档