nav/ul/li位置和放置中的段落

Question

我有一個導航欄，我使用CSS進行了樣式化...現在，我想在導航欄中放置一些普通文本，但它完全放錯位置，我發現它很難移動，因爲它根本不反應text-align或bottom。文本被放置在導航菜單上方，並創建一個空白區域。

這是我的導航欄CSS：

#nav{ 
    background-color: #222; 
} 
#nav_wrapper{ 
    width: 960px; 
    margin:0 auto; 
    text-align: right; 
    padding: 0; 
    font-family: Arial; 
    font-size: 18px; 
/* font: Batang; */ 
} 

@font-face { font: Batang; src: url('batang.tff'); } 

#nav_wrapper .current{ 
    background-color: #333; 
} 
#nav ul{ 
    list-style-type: none; 
    padding: 0; 
    margin: 0; 
    position: relative; 
} 
#nav ul li{ 
    display: inline-block; 
} 
#nav ul li img{ 
    vertical-align: middle; 
    padding-left: 10px; 
} 
#nav ul li:hover{ 
    background-color: #333; 
    transition: all 0.4s; 
} 
#nav ul li a,visited{ 
    color: #ccc; 
    display: block; 
    padding: 15px; 
    text-decoration: none; 
} 
#nav ul li a:hover{ 
    color; #ccc 
    text-decoration: none; 
} 
#nav ul li:hover ul{ 
    display: block; 
} 
#nav ul ul{ 
    display: none; 
    position: absolute; 
    background-color: #333; 
    border: 5px solid #222; 
    border-top: 0; 
    margin-left: -5px; 
    min-width: 200px; 
    text-align: left; 
} 
#nav ul ul li{ 
    display: block; 
} 
#nav ul u li a,visited{ 
    color; #ccc; 
} 
#nav ul ul li a:hover{ 
    color: #099; 
    transition: all 0.3s; 
} 

這是我嘗試添加文本：

<p class="logo">IVERSEN</p> 

導航菜單的按鍵都在右邊，我要添加文字在左邊。

這是造型我對文本進行：

#nav_wrapper .logo{ 
color: gold; 
font-size: 60px; 
font-family: Batang; 
/*width: 150px; 
margin-bottom: -50px; 
padding-top: -500px;*/ 

的唯一的事情，似乎工作（爲獲取文本移動）是寬度。

我已經嘗試過所有我能想到的東西......所以認爲你們可能能夠幫助我解決這個問題。

在需要的情況下，這是我的導航欄HTML：

<ul> 
    <li><a class="current" href="home.html">Hjem</a></li> 
    <li><a href="#">Om</a></li> 
    <li><a href="#">Kontakt</a></li> 
    <li> 
     <a href="#">Projekter<img src="images\arrow.png"/></a> 
     <ul> 
      <li><a href="#">Batch</a></li> 
      <li><a href="#">JavaScript</a></li> 
      <li><a href="#">HTML/CSS</a></li> 
     </ul> 

預先感謝您。

Answer 1

您可以將float: left添加到您的新元素以使其位置正確，但請不要忘記您的max-width與您的<ul>，因此它不會將其他元素推出。此外，我刪除了新元素的margin，以使其適合黑色背景。

#nav{ 
 
    background-color: #222; 
 
} 
 
#nav_wrapper{ 
 
\t width: 960px; 
 
\t margin:0 auto; 
 
\t text-align: right; 
 
\t padding: 0; 
 
\t font-family: Arial; 
 
\t font-size: 18px; 
 
/* \t font: Batang; */ 
 
} 
 

 
@font-face { font: Batang; src: url('batang.tff'); } 
 

 
#nav_wrapper .current{ 
 
\t background-color: #333; 
 
} 
 
#nav ul{ 
 
\t list-style-type: none; 
 
\t padding: 0; 
 
\t margin: 0; 
 
    max-width: 800px; 
 
} 
 
#nav ul li{ 
 
\t display: inline-block; 
 
} 
 
#nav ul li img{ 
 
\t vertical-align: middle; 
 
\t padding-left: 10px; 
 
} 
 
#nav ul li:hover{ 
 
\t background-color: #333; 
 
\t transition: all 0.4s; 
 
} 
 
#nav ul li a,visited{ 
 
\t color: #ccc; 
 
\t display: block; 
 
\t padding: 15px; 
 
\t text-decoration: none; 
 
} 
 
#nav ul li a:hover{ 
 
\t color; #ccc 
 
\t text-decoration: none; 
 
} 
 
#nav ul li:hover ul{ 
 
\t display: block; 
 
} 
 
#nav ul ul{ 
 
\t display: none; 
 
\t position: absolute; 
 
\t background-color: #333; 
 
\t border: 5px solid #222; 
 
\t border-top: 0; 
 
\t margin-left: -5px; 
 
\t min-width: 200px; 
 
\t text-align: left; 
 
} 
 
#nav ul ul li{ 
 
\t display: block; 
 
} 
 
#nav ul u li a,visited{ 
 
\t color; #ccc; 
 
} 
 
#nav ul ul li a:hover{ 
 
\t color: #099; 
 
\t transition: all 0.3s; 
 
} 
 

 
#nav_wrapper .logo{ 
 
position: relative; 
 
    float: left; 
 
    color: gold; 
 
    font-size: 60px; 
 
    font-family: Batang; 
 
    margin: 0; 
 
}

<div id="nav_wrapper"> 
 
<div id="nav"> 
 
<p class="logo">IVERSEN</p> 
 
<ul> 
 
<li><a class="current" href="home.html">Hjem</a></li><li> 
 
<a href="#">Om</a></li><li> 
 
<a href="#">Kontakt</a></li><li> 
 
<a href="#">Projekter<img src="images\arrow.png"/></a> 
 
<ul> 
 
<li><a href="#">Batch</a></li> 
 
<li><a href="#">JavaScript</a></li> 
 
<li><a href="#">HTML/CSS</a></li> 
 
</ul> 
 
    </div> 
 
    </div>