制作logo + nav + social的导航栏

时间:2017-12-24 10:39:33

标签: html css

我试图将文本放在我的导航栏和我的社交链接中心,但我无法做到。我在谷歌上搜索过,尝试了一切,但是没有用。我是初学者。我已经尝试了我在谷歌上找到的所有解决方案大约1小时,而我所做的就是生气了。该死的 我不明白。在片段中一切正常,它按照我的意愿集中。但在我的电脑中,它看起来像这样:pic 你能解释一下为什么会这样吗?



// Throw an error when trying to add an object while the itemValue option was not set
  if (typeof item === "object" && !self.objectItems){
    //throw("Can't add objects when itemValue option is not set");
    item = $.trim(item.name);
  }

//Header 
#header {
    position: absolute;
    top: 0;
}

//bara navigatie
#bara {
    width: 100%;
    margin: 0;
}

#bara-wrap {
    position: absolute;
    top: 0;
    width: 100%;
    background: #111111;
}


.butoane ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

.butoane li {
        float: left;
        font-weight: bold;
        margin-right: 4em;
        font-size: 1em;
}

.butoane li a {
    display: block;
    color: white;
    text-decoration: none;
}

.logo {
    width: 11em;
    margin-left: 45em;
    float: left;
}

.social {
    color: white;
    float: right;
    display: inline-block;
    font-weight: bold;
}




2 个答案:

答案 0 :(得分:0)

使用这个我在你的html和css中做了一些改变。

HTML

<header id="header" style="opacity: 1; top: 0px;">
        <div id="bara-wrap">                    
            <img src="img/logo.png" alt="LOGO" class="logo" />
            <nav id="bara">
                <ul class="butoane">
                    <li><a href="#" class="home">home</a></li>
                    <li><a href="#" class="about">about</a></li>
                    <li><a href="#" class="skills">skills</a></li>
                    <li><a href="#" class="contact">contact</a></li>
                </ul>
                <ul class="social">
                    <li class="facebook">facebook</li>
                </ul>   
            </nav>                      
        </div>
</header>

CSS

#header {
    position: absolute;
    top: 0;
}

//bara navigatie
#bara {
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}

#bara-wrap {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 70px;
    background: #111111;
}


.butoane ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

.butoane li {
        float: left;
        font-weight: bold;
        margin-right: 4em;
        font-size: 1em;
}

.butoane li a {
    display: block;
    color: white;
    text-decoration: none;
}

.logo {
    width: 11em;
    margin-left: 100px;
    float: left;
}

.social {

    position: absolute;
    right: 20%;
    top: 0;
    color: white;
    float: right;
    display: inline-block;
    font-weight: bold;
}

答案 1 :(得分:0)

删除butoane类并复制现在发布的css文件并将其粘贴到您的css文件中....

private void setGender(GenderObject customerVO){
    if (StringUtils.isNotBlank(customerVO.getGender())) {
        this.setGender(customerVO.getGender());
    }
}