Question

我似乎无法让我的css导航栏显示在与我的徽标相同的行上。我猜这有一个简单的解决方案，但作为一个学习者，似乎是我的一些出牙问题，不幸的是我无法解决。来自css和html文件的代码都在下面的jsbin链接中，您可以在其中获得完整的视觉效果：

https://jsbin.com/qopuqahute/edit?html,css,output

非常感谢您的帮助和建议。

HTML

<div id= topbar>            
        <div id= logodiv>
            Tailored Web Solutions
        </div>            
        <div id="navigationbar">
             <ul>
                 <li> About Us </li>
                 <li> Services </li>
             </ul>
        </div> 
    </div>

CSS

body{
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    background-color: #f7f7f7;
}

#topbar{
    background-color: black;
    width: 100%;
    height: 90px;
    color: #f7f7f7;
}

#logodiv{
    padding-left: 20px;
    padding-top: 30px;
    font-size: 35px;
    font-family: fantasy;
    font-style: italic;
    font-weight: bold;
}

#navigationbar ul{
    list-style-type: none;

}

#navigationbar ul li{
    color: red;
    display: inline;
    float: left;
}

Answer 1

从这里开始：

在您的float:left;规则中添加#logodiv属性，如下所示：

#logodiv{
    padding-left: 20px;
    padding-top: 30px;
    font-size: 35px;
    font-family: fantasy;
    font-style: italic;
    font-weight: bold;
    float: left;
}

Answer 2

您的#navigationbar和display: inline-block都是div，默认为块元素。要让他们排队使用#logodiv{ padding-left: 20px; padding-top: 30px; font-size: 35px; font-family: fantasy; font-style: italic; font-weight: bold; display: inline-block; } #navigationbar{ display: inline-block; }。

https://jsfiddle.net/Leztux5k/

CSS

SELECT u1.name AS username, 
       u2.name AS linked
FROM linked_users lu 
INNER JOIN users u1 ON lu.id = u1.id
INNER JOIN users u2 ON lu.linked_id  = u2.id

css导航栏不会在徽标的同一行上水平显示在页面顶部

HTML

CSS

2 个答案:

CSS