每個列表元素右側的空格

不確定爲什麼每個li右側都有一個空格，正如您在此處查看時所看到的那樣。顯然不希望它在那裏，並不知道如何擺脫它。任何幫助將不勝感激！每個列表元素右側的空格

problem

下面是代碼：

HTML：

<header> 
    <div class="nav-container"> 
    <nav class="nav-items" role="navigation">   
     <ul> 
     <li><a href="#">list1</a></li> 
     <li><a href="#">list2</a></li> 
     <li><a href="#">list3</a></li> 
     </ul> 
    </nav>   
    </div>   
</header>

CSS：

header { 
    position: fixed; 
    top:0; 
    background-color:#2C5463; 
    height:2.3em; 
    width: 100%; 
    border-bottom-color: black; 
    border-bottom-style: solid; 
    } 

header .nav-container { 
    margin: 0 30px; 
    height: 100%; 
    display: block; 
    padding: 0; 
    } 

.nav-items { 
    float: left; 
    margin: 0; 
    height: 100%; 
} 

.nav-items ul { 
    display: inline-block; 
    margin: 0; 
    height: 100%; 
} 

.nav-items ul li { 
    display: inherit; 
    border-left: 1px solid #c8c8c8; 
    height: 100%; 
    margin: 0; 
} 

.nav-items ul li a { 
    display: inherit; 
    text-decoration: none; 
    color: #ffffff; 
    margin: 0 auto; 
    padding-top: 8px; 
    white-space: nowrap; 
    height: 100%; /* Width and height of top-level nav items */ 
    width: 90px; 
    text-align:center; 
    vertical-align: middle; 
} 

.nav-items ul li:hover { 
    background: #617F8A 
}

http://jsfiddle.net/eF83x/

來源

2014-06-24 Celestriel

只需要對CSS類在這裏爲您解決方案的更改，

.nav-items ul 
{ 
    display: **inline-table**; 
    margin: 0; 
    height: 100%; 
}

Demostration

來源

2014-06-24 19:57:01

'**直列表**'是不是一個有效的CSS正確或評論... –

內聯元素對空白區域很敏感。刪除白色空間，問題消失。

例：

<ul> 
    <li><a href="#">list1</a></li><li><a href="#">list2</a></li><li><a href="#">list3</a></li> 
</ul>

jsFiddle example

你可以從字面上去掉空格的列表項之間，佔據與HTML註釋（）的空間，或浮動他們離開。

來源

2014-06-24 19:31:59 j08691

你還可以做的是讓lis漂浮並將它們顯示爲塊。這將修復它而不會弄亂HTML代碼。

.nav-items ul li { 
float: left; 
display: block; 
border-left: 1px solid #c8c8c8; 
height: 100%; 
margin: 0; 
}

jsFiddle example

來源

2014-06-24 19:40:54 ryantpayton

每個列表元素右側的空格

回答

相關問題