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

-1

所以这是我第一次使用CSS（一直在寻找一些文档），我有这个问题。CSS内联导航菜单和网站标题

我创建了一个导航菜单，右边是一个水平的导航菜单，我想在左边有网站标题，并与之对齐。我尝试了几件事情，但它要么将其放下并将菜单移动到较低位置，要么放在菜单下。

我试过的最后一件事情，但似乎我不能再使用padding-top属性（但是，我可以使用填充左侧）。如果你们中的任何一位能够帮助我完成最后一件事情，我将不胜感激。谢谢！

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

来源

2016-11-24 Adrian Muntean

提供您的代码？ –

你有部分代码吗？所以我们可以看到究竟是什么问题。给我们一个链接到[小提琴]（http://jsfiddle.net） –

不知道小提琴是如何工作的，这将是链接，但在主帖中也添加了代码：https://jsfiddle.net/7jw1up5a/ –

首先，你不能把一个<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>

来源

2016-11-24 21:11:24 Kangouroops

工作，谢谢！我现在有另一个问题。每当我尝试在文本之前添加图像时，它都会将所有内容混淆。 –

你是什么意思？添加一个图标？ – Kangouroops

我管理好了，谢谢。 –

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

回答

相关问题