刪除li元素的空格

我正在嘗試創建一個簡單的水平導航。我已經徹底搜索了堆棧溢出，並找到了如何刪除li元素之間的空白的幾個答案。我嘗試添加和刪除html元素（在單行中寫入li標籤，並添加div標籤）。我試着將我的li標籤的'display：inline'屬性改爲'display：block'和'float：left'。我還嘗試了其他一些堆棧溢出用戶的建議。刪除li元素的空格

沒有爲我工作。

我敢肯定，解決方案很簡單，但我沒有做任何事似乎正常工作。任何幫助是極大的讚賞。

我的HTML是：

<div class="nav"> 
<ul> 
<li><a href="#" class="active">One</a></li> 
<li><a href="#">Two</a></li> 
<li><a href="#">Three</a></li> 
</ul> 
</div>

我的CSS是：

.nav { 
    height: 56px; 
    width: 100%; 
    } 
.nav ul { 
    height: 100%; 
    float: right; 
    padding: 0px; 
    } 
.nav ul li { 
    height: 100%; 
    line-height: 56px; 
    background: transparent; 
    display: inline; 
    width: 100%; 
    padding: 0px; 
    } 
.nav ul li a { 
    color: #333; 
    text-transform: none; 
    text-decoration: none; 
    display: inline-block; 
    padding: 0 .5em; 
    background: transparent; 
    } 
.nav ul li a:hover { 
    color: #FFF; 
    text-transform: none; 
    text-decoration: none; 
    background: #333; 
    } 
.active { 
    color: #FFF !important; 
    background: #333 !important; 
    }

來源

2014-02-25 user3350469

嘗試在的jsfiddle重現此。 –

那麼，是否有任何答案可以解決它？請選擇其中一個作爲正確的答案，或告訴我們您的想法... –

使用浮動對齊元素和您的UL這裏後，要清除他們是一個工作演示 http://jsfiddle.net/HarishBoke/dh5eZ/

HTML

<div class="nav"> 
    <ul class="clearfix"> 
     <li><a href="#" class="active">One</a>  </li> 
     <li><a href="#">Two</a></li> 
     <li><a href="#">Three</a></li> 
    </ul> 
</div>

CSS

.nav { 
    height: 56px; 
    width: 100%; 
} 
.nav ul { 
    height: 100%; 
    padding: 0px; 
    list-style:none; 
} 
.nav ul li { 
    height: 100%; 
    line-height: 56px; 
    background: transparent; 
    padding: 0px; 
    float:left; 
    background:#ccc; 
} 
.nav ul li a { 
    color: #333; 
    text-transform: none; 
    text-decoration: none; 
    display: inline-block; 
    padding: 0 .5em; 
    background: transparent; 
} 
.nav ul li a:hover { 
    color: #FFF; 
    text-transform: none; 
    text-decoration: none; 
    background: #333; 
} 
.active { 
    color: #FFF !important; 
    background: #333 !important; 
} 
.clearfix:before, .clearfix:after { 
    content:" "; 
    display: table; 
} 
.clearfix:after { 
    clear: both; 
}

來源

2014-02-25 10:19:43 Harish

您可以添加：

li { 
    margin:-2px; 
}

這將敲背的間距

EXAMPLE

來源

2014-02-25 10:10:30 SaturnsEye

爲什麼使用負餘量，如果它可以通過正確的方式修復！ – Harish

@Harish總是很高興有多個替代品作爲回落 – SaturnsEye

，但避免使用負邊距和位置在影響dom呈現緩慢 – Harish

讓你離開浮<li>和刪除寬度：

.nav ul li { 
    height: 100%; 
    line-height: 56px; 
    background: transparent; 
    float: left; 
    padding: 0px; 
    list-style:none; 
}

我還添加了「無」列表樣式，如子彈會再次出現，一旦你刪除的顯示。

我不會使用負邊距，因爲上面是更優雅的解決方案，並且不那麼令人困惑。恕我直言，負利潤的黑客，只能作爲最後的手段...

這裏是我的小提琴：http://jsfiddle.net/5dBVg/1/

來源

2014-02-25 10:13:52

嘗試加入的風格在風格里的標籤。

li { 
    margin:-2px; 
}

來源

2014-02-25 10:14:51 joe

刪除li元素的空格

回答

相關問題