无法删除li元素之间的空间

时间:2015-08-21 17:39:41

标签: html css

我正在阅读这篇文章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;
}

2 个答案:

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