我正在阅读这篇文章How to remove the space between list items,但没有帮助。
有人可以帮我解决间距问题吗?
这是我在html和css中的代码:
<header>
<div id="sign"><a href="#">Prijava</a> | <a href="#">Registracija</a></div>
<img id="logo" src="croglas-logo.png" width="200px" height="70px"/>
<nav>
<ul>
<li><input type="text" name="search" id="search"/></li>
<li>
<select id="category_search">
<option value="default">Pretraži po kategorijama</option>
<option value="alati">Alati</option>
<option value="antikviteti">Antikviteti</option>
<option value="automobili">Automobili</option>
<option value="bazeni">Bazeni</option>
<option value="biciklizam">Biciklizam</option>
<option value="bijela_tehnika">Bijela tehnnika</option>
<option value="eknjige">E-knjige</option>
<option value="gospodarska_vozila">Gospodarska vozila</option>
<option value="hardver">Hardver</option>
<option value="igracke">Igračke</option>
<option value="apps">Igre i aplikacije</option>
<option value="kamera">Kamera</option>
<option value="knjige">Knjige</option>
<option value="kuća">Kuća</option>
<option value="kućanski_aparati">Kućanski aparati</option>
<option value="mobiteli">Mobiteli</option>
<option value="motocikli_motori">Motocikli i motori</option>
<option value="namještaj">Namještaj</option>
<option value="obuca_djecja">Obuća dječja</option>
<option value="obuca_muska">Obuća – muška</option>
<option value="obuca_zenska">Obuća – ženska</option>
<option value="odjeca_djecja">Odjeća – dječja</option>
<option value="odjeca_muska">Odjeća – muška</option>
<option value="odjeca_zenska">Odjeća – ženska</option>
<option value="poljoprivreda">Poljoprivreda</option>
<option value="poslovni_prostor">Poslovni prostor</option>
<option value="printer">Printer</option>
<option value="racunala">Računala</option>
<option value="rucni_radovi">Ručni radovi</option>
<option value="satovi">Satovi</option>
<option value="sport">Sport</option>
<option value="stan">Stan</option>
<option value="suncane_naocale">Sunčane naočale</option>
<option value="tableti">Tableti</option>
<option value="torbe">Torbe</option>
<option value="tv">Tv</option>
<option value="udzbenici">Udžbenici</option>
<option value="vrtna_garnitura">Vrtna garnitura</option>
<option value="vrtna_oprema">Vrtna oprema</option>
<option value="zemljiste">Zemljište</option>
<option value="zvucnici/slusalice">Zvučnici/slušalice</option>
</select>
</li>
<li><input class="myButton" type="submit" value="pretraži"/></li>
<li><img src="#"/><span class="btn">PREDAJ OGLAS</span></li>
</ul>
</nav>
</header>
header{
width:100%;
height:100px;
background: rgb(255,255,255); /* Old browsers */
background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(237,237,237,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(47%,rgba(246,246,246,1)), color-stop(100%,rgba(237,237,237,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(246,246,246,1) 47%,rgba(237,237,237,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(246,246,246,1) 47%,rgba(237,237,237,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(246,246,246,1) 47%,rgba(237,237,237,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(246,246,246,1) 47%,rgba(237,237,237,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ededed',GradientType=0 ); /* IE6-9 */
}
#sign{
border:1px solid black;
width:65%;
margin:0 auto;
text-align:right;
}
#sign a{
text-decoration:none;
}
#logo{
position:absolute;
}
nav{
width:65%;
margin:0 auto;
}
nav ul{
width:100%;
text-align:center;
float:left;
list-style:none;
padding:0;
border:1px solid black;
}
nav ul li{
display:inline;
}
#search{
width:380px;
height:35px;
border-radius:5px;
font-size:20px;
}
#search_results{
display:none;
}
#category_search{
width:170px;
height:35px;
border-radius:5px;
}
.myButton {
width:100px;
-moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
-webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
box-shadow:inset 0px 1px 0px 0px #ffffff;
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #f9f9f9), color-stop(1, #e9e9e9));
background:-moz-linear-gradient(top, #f9f9f9 5%, #e9e9e9 100%);
background:-webkit-linear-gradient(top, #f9f9f9 5%, #e9e9e9 100%);
background:-o-linear-gradient(top, #f9f9f9 5%, #e9e9e9 100%);
background:-ms-linear-gradient(top, #f9f9f9 5%, #e9e9e9 100%);
background:linear-gradient(to bottom, #f9f9f9 5%, #e9e9e9 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f9f9f9', endColorstr='#e9e9e9',GradientType=0);
background-color:#f9f9f9;
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
border:1px solid #dcdcdc;
display:inline-block;
cursor:pointer;
color:#666666;
font-family:Trebuchet MS;
font-size:20px;
font-weight:bold;
font-style:italic;
padding:5px 8px;
text-decoration:none;
text-shadow:0px 1px 0px #ffffff;
}
.myButton:hover {
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #e9e9e9), color-stop(1, #f9f9f9));
background:-moz-linear-gradient(top, #e9e9e9 5%, #f9f9f9 100%);
background:-webkit-linear-gradient(top, #e9e9e9 5%, #f9f9f9 100%);
background:-o-linear-gradient(top, #e9e9e9 5%, #f9f9f9 100%);
background:-ms-linear-gradient(top, #e9e9e9 5%, #f9f9f9 100%);
background:linear-gradient(to bottom, #e9e9e9 5%, #f9f9f9 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#e9e9e9', endColorstr='#f9f9f9',GradientType=0);
background-color:#e9e9e9;
}
.myButton:active {
position:relative;
top:1px;
}
.btn {
height:35px;
background: #c70a0a;
background-image: -webkit-linear-gradient(top, #c70a0a, #c40808);
background-image: -moz-linear-gradient(top, #c70a0a, #c40808);
background-image: -ms-linear-gradient(top, #c70a0a, #c40808);
background-image: -o-linear-gradient(top, #c70a0a, #c40808);
background-image: linear-gradient(to bottom, #c70a0a, #c40808);
-webkit-border-radius: 5;
-moz-border-radius: 5;
border-radius: 5px;
font-family: Arial;
color: #ffffff;
font-size: 20px;
padding:9px;
text-decoration: none;
cursor:pointer;
}
.btn:hover {
background: #f00808;
background-image: -webkit-linear-gradient(top, #f00808, #eb0c2a);
background-image: -moz-linear-gradient(top, #f00808, #eb0c2a);
background-image: -ms-linear-gradient(top, #f00808, #eb0c2a);
background-image: -o-linear-gradient(top, #f00808, #eb0c2a);
background-image: linear-gradient(to bottom, #f00808, #eb0c2a);
text-decoration: none;
}
答案 0 :(得分:1)
应用
ul { font-size: 0; }
和
li { display: inline-block; font-size: 16px; /* or whatever you need */ }
是最安全的选择,可以删除内联块元素之间不需要的空格。
答案 1 :(得分:0)
尝试折叠&#39; li&#39;元素:
<li>Element 1</li><li>Element 2</li>