header li + li分隔符放置問題

我試圖在我的導航菜單中找到一個分隔符，並且發現了'li + li'函數，但是我很難在右邊獲得分隔符地點。我試圖讓它均勻地放置在兩個佔位符居中和所有之間。我試圖用邊緣和填充屬性搞亂，沒有運氣。header li + li分隔符放置問題

這是一個jsfiddle以及我想要實現的代碼和圖片示例。任何幫助非常感謝，謝謝。

enter image description here

HTML/CSS

<style> 

body { 
    margin: 0; 
    color:white;; 
} 

#header { 
    background-color: #1c2024; 
    height: 100px; 
    width: 100%; 
    text-align: center; 
    line-height: 100px; 
} 

#header ul { 
    margin: 0; 
} 

#header li { 
    display:inline; 
} 

#header li + li { 
    background:url('http://i.imgur.com/IdVT0cL.png') no-repeat; 
    padding-left: 20px; 
    padding-right: 20px; 
} 

</style> 

</head> 

<body> 
    <div id="wrapper"> 
     <div id="header"> 
      <ul> 
       <li>odsfjkoj</li> 
       <li>odsfjkoj</li> 
      </ul> 
     </div> 
    </div> 
</body>

來源

2014-01-30 ErraticFox

你爲什麼不只是使用邊境定義的顏色？這種情況下的圖像是無用的。你可以使用border-right：1px solid＃666;和李：最後一個孩子的邊界：沒有;規則。 –

你會爲了定位後臺使用background-size/background-position。

在這種情況下，只需使用速記：

UPDATED EXAMPLE HERE

#header li + li { 
    background: url('http://i.imgur.com/IdVT0cL.png') 8px 8px/1px 10px no-repeat; 
    padding-left: 20px; 
}

來源

2014-01-30 22:23:46

我從來不知道背景屬性的位置/大小是這樣的。很好學習新的東西每一天。完美的作品，儘管我必須調整位置以適應我的裝備。謝謝！ :) – ErraticFox

@ErraticFox不客氣，很高興幫助。你可能想要這樣的東西，對吧？ http://jsfiddle.net/DsGSj/ –

我會使li元素display:block和應用填充到所有的左側和右側。這種方式，他們有平等距文本兩側的距離

然後在背景圖像的垂直位置上使用50%。

#header li { 
    display:inline-block; 
    padding: 0 20px; 
} 

#header li + li { 
    background:url('http://i.imgur.com/IdVT0cL.png') 0 50% no-repeat; 
}

http://jsfiddle.net/gaby/jzcZ4/1/

（我用註釋掉的空白，使其不影響佈局的一招..）

來源

2014-01-30 22:42:11

header li + li分隔符放置問題

回答

相關問題