CSS3 导航栏：浮动：右

Question

我正在为我们学校的科学博览会创建和设计一个迷你社交网站，但在设计阶段我已经遇到了问题。 :(

所以我创建了一些关于我的网站应该的外观的 PSD，但将我的设计转换为 HTML/CSS 似乎更难。我现在的问题是这个导航栏不配合我...

总之，这个导航栏很简单；徽标，带有标题、副标题和一些菜单选项（登录、注册）。我正在使用float:right; 将我的选项浮动到右侧，但这不是很好。

我的导航栏的选项在导航栏下方突出显示。这真的很奇怪；当我取出float:right; 时，它看起来非常好，但在左边。我真的希望它在右侧。

可通过http://ticktalk.me.pn/ 获取网站示例。注册页面的 PSD 可在此处获得：http://img1.imagilive.com/0314/tickTalk-signup.jpg。

请随时“查看页面源代码”并调查我做错了什么。可以在http://ticktalk.me.pn/css/style.css 获得指向 css 的直接链接。

提前致谢。

编辑：

这是我的导航栏 HTML...

<div class= "navbar-header">
    <div class= "navbar-title"><a href= "#">
        tick<span class= "bookfont">talk</span>
    </a></div>
    <div class= "navbar-subtitle">
        social networking around the clock
    </div>
    <div class= "navbar-menu">
        <div class= "navbar-option login-button">
            Login
        </div>
        <div class= "navbar-option navbar-checked signup-button">
            Sign Up
        </div>
    </div>            
</div>

这是我的 CSS：

.navbar-header {
    display:block;
    background-color: rgb(0, 241, 73);
    padding:10px;
    margin-bottom:75px;
}
.navbar-logo {
    display:inline-block;
}
.navbar-title {
    display:inline-block;
    font-size: 52px;
    margin-left:10px;
    margin-right:5px;
}
.bookfont {
    font-weight: 500;
}
.navbar-subtitle {
    display:inline-block;
    font-size: 30px;
}
.navbar-menu {
    float:right;
}
.navbar-option {
    display:inline-block;
    font-size:25px;
    padding:20px;
    padding-left:30px;
    padding-right:30px;
}
.navbar-checked {
    background-color: rgb(0, 217, 63);
}

Answer 1

将具有“float:right”的元素放在该行的其余元素之前。

基本上，将<div class="navbar-menu">...</div> 移动到<img src="logo.png" ...> 之前。 或者，在已编辑问题的示例代码中，将<div class="navbar-menu">...</div> 移动到<div class="navbar-title">...</div> 之前。

我不确定这在技术上的合理性，但最好将浮点数放在非浮点数之前。 也许这是因为它假设浮动元素没有空间。

Answer 2

尝试左侧的元素用另一个div包裹。比如这样：

<div class="navbar-header">
    <div class="another-div">
        <img src="logo.png" alt="logo.png" class="navbar-logo" width="47" height="47">
        <div class="navbar-title">
           <a href="#">tick<span class="bookfont">talk</span></a>
        </div>
        <div class="navbar-subtitle">
            social networking around the clock
        </div>
    </div>
    <div class="navbar-menu">
        <div class="navbar-option login-button">
            Login
        </div>
        <div class="navbar-option navbar-checked signup-button">
            Sign Up
        </div>
    </div>
</div>

然后给.another-div CSS 属性float:left，然后不要忘记为.navbar-header 设置hight。

.another-div{
    float: left;
}
.navbar-header{
    height: 80px;
}

这应该可行。