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，并且不要忘记在此之后为hight设置.navbar-header。

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

这应该有效。

CSS3导航栏：浮动：正确

2 个答案: