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{ 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; max-width: 800px; } #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; } #nav_wrapper .logo{ position: relative; float: left; color: gold; font-size: 60px; font-family: Batang; margin: 0; }，使其适合黑色背景。

＆＃13;

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

＆＃13;

{{1}}

＆＃13;

nav / ul / li位置的段落＆amp;放置

1 个答案: