我在一个网站上工作,我有一个css问题。这是一个小(大)问题:编辑过的图片
我想去掉那个空位……(在第二个和第三个元素之间)
源代码如下:
nav {
z-index: 100;
background: url(../images/slider-bg.png) 0 0 no-repeat;
margin: 0px 0px 0px 5px;
height: 571px;
overflow: hidden;
padding: 0px;
}
ul.menu {
margin: 0px 0px 0 0px;
display: inline-block;
padding: 30px;
}
ul.menu li {
float: left;
line-height: 20px;
margin: 0px 5px 5px 5px;
}
ul.menu li a {
font-size: 23px;
line-height: 20px;
font-family: 'Cabin Sketch', cursive;
text-transform: uppercase;
font-weight: bold;
letter-spacing: -1px;
display: block;
margin: 0px;
padding: 2px
}
ul.menu li:hover a,
ul.menu li.current a {
color: #000;
}
<header>
<h1 class="logo"><br/>
<a href="index.php"><img src="images/logoPetit.png" alt=""></a>
</h1>
<nav>
<div id="slide">
<div class="slider">
<ul class="items">
<li><img src="images/slider-1.jpg" alt=""></li>
<li><img src="images/slider-2.jpg" alt=""></li>
<li><img src="images/slider-3.jpg" alt=""></li>
</ul>
</div>
<a href="#" class="prev"></a>
<a href="#" class="next"></a>
</div>
<ul class="menu">
<li class="current"><a href="index.php" class="clr-1">Acceuil</a></li>
<li><a href="projetPedagogique.php" class="clr-2">Projet pédagogique</a></li>
<li><a href="vie.php" class="clr-3">Vie dans l'école</a></li>
<li><a href="classe.php" class="clr-4">Classe</a></li>
<li><a href="contacts.php" class="clr-5">Contact</a></li>
<li><a href="gallery.php" class="clr-7">Gallerie</a></li>
</ul>
</nav>
</header>
我把html代码放在一个代码片段中(我真的不知道它是什么),因为它看起来像是在执行。
请帮帮我!
发布于 2018-07-01 08:13:06
请在此添加另一个属性text-align
到left ...
ul.menu li a {
font-size: 23px;
line-height: 20px;
font-family: 'Cabin Sketch', cursive;
text-transform: uppercase;
font-weight: bold;
letter-spacing: -1px;
display: block;
margin: 0px;
padding: 2px;
text-align: left;
}
https://stackoverflow.com/questions/51119436
复制相似问题