CSS 内联导航菜单和网站标题

Question

所以这是我第一次使用 CSS（一直在查看一些文档），我遇到了这个问题。

我创建了一个导航菜单，右侧是一个水平菜单，我希望网站标题位于左侧，与其内嵌。我尝试了一些方法，但它要么将其调高并将菜单下移，要么将其置于菜单下方。

我尝试的最后一件事成功了，但似乎我不能再使用 padding-top 属性（但是，我可以使用 padding-left）。如果你们中的任何人能帮助我解决最后一件事，我将不胜感激。谢谢！

CSS 代码：（很乱，我知道，正如我所说，这是我的第一个代码:)）

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    position: relative;
    padding-top: 10px;
    padding-right: 50px;
}

li {
    float: right;
    font-family: 'Raleway';
    font-size: 20px;
}

a {
    display: block;
    padding: 20px;
    background-color: transparent;
    color: black;   
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

a:hover {
    color: orangered;
}


/* Logo */

#logo {
    float: left;
    display: inline-block;
    position: relative;
    padding-left: 200px;
    padding-top: -250px;
    font-family: 'Raleway';
    font-size: 30px;
}


/* Fonts */ 


@font-face {
    font-family: Raleway;
    src: url(/css/fonts/raleway.ttf);
}

Answer 1

首先，你不能把 <p> 放在 <ul> 里面。

您可以通过将徽标放在 <li> 中并使用 float:left;.

来实现您想要的效果

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    position: relative;
    padding-top: 10px;
    padding-right: 50px;
}

li {
    float: right;
    font-family: 'Raleway';
    font-size: 20px;
}

a {
    display: block;
    padding: 20px;
    background-color: transparent;
    color: black;   
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

a:hover {
    color: orangered;
}


/* Logo */

#logo {
    float: left;
    font-size: 30px;
}


/* Fonts */ 


@font-face {
    font-family: Raleway;
    src: url(/css/fonts/raleway.ttf);
}

                <ul>
                    <li id="logo">Cluj</li>
                    
                    <li><a href="contact.html">CONTACT</a></li>
                    <li><a href="imagini.html">IMAGINI</a></li>
                    <li><a href="stiri.html">STIRI</a></li>
                    <li><a href="evenimente.html">EVENIMENTE</a></li>
                    <li><a href="index.html">ACASA</a></li>
                </ul>

CSS 内联导航菜单和网站标题

CSS inline navigation menu and website title

css

inline

elements