1

リスト内の要素間のスペースを削除したいと思います。リスト全体をインラインに並べればこれは可能ですが、それでは非常に読みにくくなります。

これは私が持っているものです、私は彼らがお互いにフラッシュして欲しいです。

a

<div id="navBar">
    <ul>
        <li><a href="/" class="home">HOME</a></li>
        <li><a href="/">ROOMS</a></li>
            <!-- <ul>
                <li>Test</li>
            </ul> -->
        <li><a href="/profiles/" class="end">PROFILES</a></li>
    </ul>

       <!-- stuff -->
</div>

CSS：

#navBar {
display: inline-block;
height: 30px;
margin: 0;
padding: 0;
border-top: 3px ridge #292929;
}

#navBar ul{
display: inline;
list-style: none;
margin: 0;
padding: 0; 
font: 15px bold Arial;
background: transparent;
}

#navBar ul li {
padding: 0;
display: inline;
text-align: center; 

}

#navBar ul li a{
display: inline-block;
width: 110px;
height: 23px;
padding-top: 7px;
text-decoration: none;
color: White;
border-right: 1px groove #292929;
border-bottom: 1px groove #292929;
background-color: #70797F;
}

ページのこの部分に関係するのはそれだけだと思います。

ありがとうございました！

4

4 に答える 4

2

float プロパティを使用すると、要素間のスペースを削除できます。 これをチェックして

#navBar ul li 
{
padding: 0;
display: inline;
text-align: center;
float:left;

}
于 2012-04-27T02:23:35.460 に答える
2

li左に浮かせます。

#navBar ul li {
    padding: 0;
    display: inline;
    text-align: center;
    float: left;
}

jsフィドル

于 2012-04-27T02:10:14.800 に答える
2

「display: inline」の代わりに「float: left」を使用する

これをチェックしてくださいhttp://jsfiddle.net/ckzmF/

#navBar ul li {
  padding: 0;
  text-align: center;
  float:left;
  /* display: inline; */
}
于 2012-04-27T02:13:10.277 に答える
1

margin-left または padding-left を -2px (またはその他の適切な数値) に設定することもできます。

于 2012-05-12T16:44:25.203 に答える