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;来实现您的目标。

＆＃13;

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);
}

＆＃13;

                <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>

＆＃13;

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

1 个答案: